text-decoration doesn't work on a button element in Firefox, workaround?
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>
精彩评论