Html 在Firefox输入字段中剪裁的下降项_Html_Css

Html 在Firefox输入字段中剪裁的下降项

html css

Html 在Firefox输入字段中剪裁的下降项,html,css,Html,Css,我有以下代码： <html> <head> <style> input { /* line-height: 1.6em; */ /* doesn't seem to make any difference */ height: 1.6em; } </style> </head> <body> <form action="foo" met

我有以下代码：

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


输入{
/*线条高度：1.6em；*//*似乎没有任何区别*/
高度：1.6em；
}
名字：

当我将代码放在文件系统或JBoss服务器的文件中并导航到它时，Firefox

57.0.3

没有将文本输入字段渲染得足够高，导致所有字母的下一个字母都被剪裁：

Chrome渲染效果很好

奇怪的是，Chrome和Firefox都正确地呈现了这个页面

我做错了什么，为什么不能在JSFIDLE中复制

我认为即使是

1em

的高度也足够了，更不用说

1.6em

这可能是由于字体的组合，以及小于默认值的

高度。在我的系统上，默认字体大小为13.3333px
，默认（计算）高度为23px
。这是~1.725的比率，略高于您的1.6em

1em
高度不够，因为要绘制输入字段需要使用边框和填充。请参见下面的长方体模型：

由于CSS规范化，您无法在JSFIDLE中复制它。
只是一个问题：如果直接使用px值会怎么样？它有效吗？@Temaniaf如果它对28px
有效，但我更愿意用em
来表达它。是的，我知道：）只是想看看是高度不起作用还是只是转换。所以这似乎是一个问题conversion@StijnFirefox57.0.3
onUbuntu 16.04.1 LTS
您无法复制它的事实告诉我们，您的案例中应用了CSS，但这里没有em
与字体大小有关。必须有字体大小
、行高
和填充
的组合才能产生这种效果。如果你需要适当的帮助，你需要找到一种方法在这里重新编程。使用rem
有帮助吗rem
取决于
的字体大小。我需要将其设置为2em
才能在Firefox中正确渲染，此时它对于Chrome来说太高了。你是说Firefox和Chrome使用不同的默认字体大小和默认计算高度？为什么我不能在jsfiddle中重新编程呢？jsfiddle有一个CSS重置，可以跨浏览器正常化，不是吗？也许如果您自己使用CSS重置样式表，问题就解决了。关于JSFIDLE的CSS重置有一个很好的观点。但是box size:content box
是CSS中的默认值，所以高度1em
应该足够了，不是吗？默认值是border box
，至少在Firefox 57中是这样，因此，明确地将框大小设置为内容框
，并将高度降低为1.1em
，可以在Chrome和Firefox中产生可接受的结果。奇怪的是，1em
仍然不够，即使使用内容框
。