Why is Firefox cutting off the text in my <input type="text"/>?

Question

I have a simple <input type="text"/> styled with the following:

font-size:1.5em;line-height:1.5em;padding:.6em .4em;

It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).

However, we arrive at Firefox, and this happens:

As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.

Note:

It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.

Here's a JSFiddle, with the exact problem I'm describing:

http://jsfiddle.net/xxepX/

Answer 1

Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.

Answer 2

This helped me in a similar case:

input.with-fancy-styling {
    box-sizing: content-box;
}