为什么Firefox会切断<input type ="text"/>中的文本？

Question

我有一个简单的<input type="text"/>风格与以下:

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

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

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

如您所见,Firefox决定在某个高度切断字体的大小.为什么会这样？即使我从中删除填充,也会出现此问题<input>.

注意:

知道应用于此输入的其他样式是Twitter Bootstrap v.2.0中使用的默认样式可能会有所帮助.

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

http://jsfiddle.net/xxepX/

Answer 1

尝试增加行高属性.这将限制字母的可视区域,导致它们被切断.Firefox的渲染引擎渲染行高略有不同.

Answer 2

这在一个类似的案例中帮助了我:

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