Html 为什么Firefox会切断my<；中的文本；输入类型="；“文本”/>；？

我有一个简单的

样式如下：

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

它在Chrome、Safari（即Webkit浏览器）中正常显示

然而，我们来到了Firefox，发生了这样的事情：

正如你所看到的，Firefox决定在一定的高度切断字体的大小。为什么会这样？即使我从

中删除了填充，也会出现此问题

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

下面是一个JSFIDLE，以及我正在描述的确切问题：

---

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

您好，您不需要定义输入标记类的高度或指定高度：auto；在输入标记类中

或观看现场演示：-

已更新

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

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

---

或者您可以看到现场演示：-

我也遇到了这个问题，希望与大家分享我的修复方案

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

即使这样，我还是对小写的j、g和y进行了微调

我在

窗体控件
类中检查并发现此样式：

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

因为它使用的是
边框框
框大小，我不想要更高的框，我只是在自己的样式表中重写了样式，并减少了填充：

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

它解决了这个问题。
这在类似的情况下帮助了我：

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

我也尝试了增加“线高度”的技术。但是它使文本的高度太长。用“height”替换“line height”解决了我在FF和chrome中的问题，并且没有使它的高度太长。
使用css时，你不应该使用
填充
作为输入框，而应该使用
文本缩进
。
在JSFIDLE上看到一个实例会很有趣吗，我马上就把它挂起来。确保Firefox浏览器的“缩放”设置为100%可能复制感谢，但这是我尝试的第一件事。除了输入的大小增加外，什么也不会发生。文本仍被截断。您还需要调整高度和填充。试试这个：字体大小：1.5em；填充：0.43em 0.4em；线高：1.25em；高度：1.25em；好吧，但这有什么意义呢？
高度
和
行高度
如果不大于
字体大小
，是否应该相等？
字体大小
中的em受父级/容器值的影响，而
行高度
中的
em
是基于元素的
字体大小
计算的。样本：