Firefox text input truncates bottoms of letters

Drop below letters like g, y, j are truncated in Firefox 3.6 only.

<input type="text" value="yyyy gggg xxxx" style="height: 1em;" />

http://jsfiddle.net/mrtsherman/yqTjX/

My google-fu is completely failin开发者_如何学Cg me. Simple problem. I imagine there is a simple solution.

1em represents the width of a lowercase M in the given font, so I understand. 1em won't necessarily produce enough height for a full character to be displayed. Because of differences in font rendering between browsers (especially Firefox and Safari), you may notice subtle differences along these lines. Either remove the height (so it's automatically calculated), or increase the size. Nice and simple.

don't use em's to size the input then you can then change the font-size to suit. If you set the size via em's the box will always be based on the font-size, it's inherited.

1em is usually (not always) always equivalent to 16px if the users browser default setting are at default or it will be based on a font-size setting you have set earlier in your sheet.. find the equivalent in px for your clients wishes and then make the font-size for those inputs about 3-4px smaller to allow for the descenders and ascenders

input {  
    height: 16px;
    width: 100px;
    font-size: 13px;
}