为什么 Firefox 会截断我的 <input type="text"/> 中的文本？答案

【问题标题】：Why is Firefox cutting off the text in my <input type="text"/>?为什么 Firefox 会截断我的 <input type="text"/> 中的文本？
【发布时间】：2012-04-11 14:28:20
【问题描述】：

我有一个简单的<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/

【问题讨论】：

在 jsfiddle 上看到一个活生生的例子会很有趣吗？
会的，我会在几秒钟内把它放上来。
确保 Firefox 浏览器的“缩放”设置为 100%
input padding cutting out text in firefox的可能重复

标签： html css layout

【解决方案1】：

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

【讨论】：

谢谢，但这是我尝试的第一件事。什么都没有发生，除了输入的大小增加了。文字仍然被截断。
您还需要调整高度和填充。试试这个：字体大小：1.5em；填充：0.43em 0.4em；行高：1.25em；高度：1.25em;
好的，但这有什么意义呢？ height 和 line-height 不应该与font-size 相等（如果不是更大）吗？
font-size 中的 em 受父容器/容器的值影响，而line-height 中的em 是根据元素的font-size 计算得出的。示例：jsfiddle.net/sikusikucom/ryd6p

【解决方案2】：

这在类似的情况下帮助了我：

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

【讨论】：

【解决方案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;
}

它解决了这个问题。

【讨论】：

【解决方案4】：

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

或观看现场演示：-

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

更新

请检查您更新的 css 我已在您的 css 中添加了行高和高度并删除了填充。

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

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

【讨论】：

【解决方案5】：

我也尝试了增加“行高”的技术。但它使文本的高度太长。将 'line-height' 替换为 'height' 解决了我在 FF 和 chrome 中的问题，而不会使其高度过长。

【讨论】：

【解决方案6】：

对于 css，您不应该使用 padding 作为输入框，而对于缩进使用 text-indent。

【讨论】：