Question

我有以下代码：

<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了。

Answer 1

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

1em高度不够，因为绘制输入字段涉及边框和填充。请参阅下面的框模型：

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

在Firefox输入字段中剪切的下行程序

1 个答案: