2

我发现了一个奇怪的大小调整现象。<input>以下代码段中的元素与 Chrome 和 Firefox 的结果不同height，只有font-family:Roboto和font-size:14px。

当我将其设置font-size为 15px 或使用不同的字体时，一切似乎都很好，并且保持在height:35px

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
  <style>
    input {
      font-family: Roboto;
      font-size: 14px;
      padding: 8px;
      border: 1px solid black;
      margin: 0;
    }
  </style>
</head>

<body>
  <input type="text" value="this is a test" />
</body>

</html>

13 英寸 MacBook Pro（2017 - Mojave 10.14.2）：

  • 外接 25 英寸戴尔 U2518D 屏幕：
    • 火狐：height:35px
    • 铬合金：height:34px
    • 苹果浏览器：height:34px

15 英寸惠普 Windows 10 笔记本电脑：

  • 铬合金：height:35px
  • 火狐：height:35px
  • 边缘：height:34.8px

有人可以解释 Mac 上 Chrome 和 Firefox 之间 1px 的区别吗？还是 Mac 上的 Chrome 和 Windows 上的 Chrome 之间的 1px 差异？

为什么它只发生在 14px 的字体大小上？

编辑：试图澄清问题

4

0 回答 0