在 Firefox 输入字段中剪切的下降器答案

【问题标题】：descenders clipped in Firefox input field在 Firefox 输入字段中剪切的下降器
【发布时间】：2018-01-06 06:47:56
【问题描述】：

我有以下代码：

<html>
  <head>
    <style>
     input {
       /* line-height: 1.6em; */ /* doesn't seem to make any difference */
       height: 1.6em;
     }
    </style>
  </head>
  <body>
    <form action="foo" method="POST" enctype="multipart/form-data">
      <label>First Name:</label> <input type="text" value=""/>
    </form>
  </body>
</html>

当我将代码放在我的文件系统或 JBoss 服务器中的文件中并导航到它时，Firefox 57.0.3 没有将文本输入字段渲染得足够高，从而导致所有字母的下行字母被剪裁：

Chrome 渲染得很好。

奇怪的是，jsfiddle 在 Chrome 和 Firefox 中都能正确呈现。

我做错了什么，为什么我不能在 jsfiddle 中重现它？

我认为即使1em 的高度也足够了，更不用说1.6em了。

【问题讨论】：

只是一个问题：如果你直接使用 px 值呢？它有效吗？
@TemaniAfif 它确实适用于28px，但我宁愿在em 中表达它。
是的，我知道 :) 只是想看看它是高度不起作用还是只是转换。所以这似乎是转换的问题
@Stijn Firefox 57.0.3 Ubuntu 16.04.1 LTS
您无法重现它的事实告诉我们，您的案例中应用了 CSS，但此处不存在。 em 是相对于字体大小的。必须有font-size、line-height 和padding 的组合来产生这个。如果您需要适当的帮助，您需要在这里找到一种方法来复制它。使用rem 有帮助吗？ rem 取决于 <body>s 字体大小。

标签： html css

【解决方案1】：

这可能是由于字体和小于默认的height 值的组合。在我的系统上，默认字体大小为13.3333px，默认（计算）高度为23px。这是一个 ~1.725 的比率，略高于您的 1.6em。

1em 高度是不够的，因为绘制输入字段涉及到边框和填充。见下面的盒子模型：

由于 CSS 规范化为 active by default，您无法在 jsfiddle 中重现它。

【讨论】：

我需要将它设置为 2em 才能在 Firefox 中正确呈现，此时它对于 Chrome 来说太高了。所以你是说 Firefox 和 Chrome 使用不同的默认字体大小和默认计算高度？为什么我不能在 jsfiddle 中重现这个？
jsfiddle 有一个 CSS 重置来规范跨浏览器，不是吗？也许如果您自己使用 CSS 重置样式表，问题就解决了。
关于 jsfiddle 的 CSS 重置的要点。但是 box-sizing: content-box 是 CSS 中的默认值，所以高度 1em 就足够了，不是吗？
默认是border-box，至少在Firefox 57中。
好的，所以明确地将box-sizing 设置为content-box 并将height 减少为1.1em 在 Chrome 和 Firefox 中都会产生可接受的结果。奇怪的是1em 仍然不够，即使有content-box。