为什么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:
尝试增加行高度属性。这将限制字母的可视区域,导致它们被切断。 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.