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

Question

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 the 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?

Answer 1

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>

Answer 2

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>