Question

我有一个简单的<input type="text"/>样式，其中包含以下内容：

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

它在Chrome，Safari（即Webkit浏览器）中完全正常显示。

然而，我们到达Firefox，发生了这种情况：

Why is this happening? Gah!

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

可能有助于了解应用于此输入的其他样式是Twitter Bootstrap v.2.0中使用的默认样式。

这是一个JSFiddle，我正在描述的确切问题：

Answer 1

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

Answer 2

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

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

Answer 3

我也有这个问题，想分享我的修复。

首先，请确保您拥有正确的doctype声明，如下所示：

<!DOCTYPE html> <html lang="en">

即使这样，我也会对小写的j，g和y进行微调。

我在.form-control班上检查并发现了这种风格：

.form-control {
    /* other styles omitted for brevity */
    height: 30px;
    padding: 6px 12px;
}

因为它正在使用border-box框大小调整，并且我不想要更高的框，所以我只是在我自己的样式表中覆盖了样式并减少了填充：

.form-control {
    padding: 5px 12px;
}

它解决了这个问题。

Answer 4

您好，您不需要定义输入标签类的高度或给出高度：auto;在您的输入标记类

中

或观看直播演示： -

http://jsfiddle.net/xxepX/2/

<强>已更新

请检查您更新的css我添加了行高＆amp;你的CSS中的高度并删除了填充。

.huge-form input, .huge-form button{
    font-size:1.5em;padding:0;
    line-height:31px;
    height:31px;
}

或者你可以看到现场演示： - http://jsfiddle.net/xxepX/5/

Answer 5

我也尝试过提高行高的技巧。但它使文本的高度太长。更换“线高”＆＃39;高度＆＃39;解决了我在FF和铬问题上的问题，但没有让它太长。

Answer 6

使用css，您不应将padding用于输入框，而是使用text-indent代替缩进。