css - Firefox problems with floated span inside <button>

Question

I have not been able to make a html5 button with a span inside of it look alike in Chrome and FF. See the link below in FF and then in Chrome. The text "Login" is verticaly centered in Chrome but in FF the text is higher up. Line height can not be changed in FF with buttons.

When I try to solve this problem without using float another problem accurs whith the line-height and using font-size:30px in the span.

Check out the problem here

Oh, and I dont want to use images..

Answer 1

The Firefox issue is this: Revisiting the Firefox button line-height bug... any 2011 solutions?

You can work around it by wrapping the text inside the button in a span, and adding the line-height to that:

<button><span>LOGIN</span><span class="a">?</span></button>

button span:first-child {
    line-height:35px;
}

See: http://jsbin.com/afezem/2

Or, you might prefer to slightly abuse the b element: http://jsbin.com/afezem/4

<button><b>LOGIN</b><span>?</span></button>