开发者

text-decoration doesn't work on a button element in Firefox, workaround?

开发者 https://www.devze.com 2023-01-07 15:38 出处:网络
I\'ve got a simple button with a single css-style, like this: <button style=\"text-decoration:underline\">That\'s a button</button>

I've got a simple button with a single css-style, like this:

<button style="text-decoration:underline">That's a button</button>

Firebug tells me in the computed styles tab that indeed text-decoration is set to underline. However t开发者_高级运维he Button-text is not underlined, why not? Obviously it's an issue with Firefox (3.6), since Chrome and IE both underline the button-text. Is there some css-workaround for Firefox, or do I have to put the button in an outer div with the text-decoration style?


A little more research online has produced a more elegant workaround, and convinced me it probably is a 'bug'. It is almost a type of 'hasLayout' for FireFox (not really, but acts similar). If you add any of the following, it shows the underline: position: absolute, display: block, display: inline-block, float: left (or right). So:

<button style="text-decoration:underline; display: inline-block;">That's a button</button>


It does seem to be a 'bug' (I don't actually know what the web standards say about the button element, so I hesitate to proclaim it a 'bug' or just a difference in browser interpretations). This worked, but is really not much different than your div wrapper solution:

<button ><span style="text-decoration:underline">That's a button</span></button>
0

精彩评论

暂无评论...
验证码 换一张
取 消