为什么Firefox会截断我的< input type =" text" /&gt ;?中的文字 [英] Why is Firefox cutting off the text in my <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.

这篇关于为什么Firefox会截断我的< input type =" text" /&gt ;?中的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！