为什么Firefox会截断我的< input type =" text" /> ;?中的文字

问题描述:

我有一个简单的< input type =text/> ,样式如下:

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

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

它在Chrome,Safari(即Webkit浏览器)中正​​常显示。

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

但是,我们到达Firefox,发生这种情况:

However, we arrive at Firefox, and this happens:

如你所见,Firefox决定在某种特定高度。为什么会发生这种情况?即使我从< input> 中删除​​填充,也会出现此问题。

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>.

这可能有助于了解应用于此输入的其他样式是使用的默认样式

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

这是一个JSFiddle,我正在描述的确切问题:

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

http://jsfiddle.net/xxepX/

尝试增加行高度属性。这将限制字母的可视区域,导致它们被切断。 Firefox的呈现引擎会使行高稍有不同。

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.