Roboto с 14px дает разные размеры Chrome/ Firefox

Я обнаружил странное проклеивание. <input> элемент в следующем фрагменте приводит к различным height только с Chrome и Firefox 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 - Мохаве 10.14.2):

  • Внешний 25-дюймовый экран Dell U2518D:
    • Fire Fox: height:35px
    • Хром: height:34px
    • Сафари: height:34px

15-дюймовый ноутбук HP Windows 10:

  • Хром: height:35px
  • Fire Fox: height:35px
  • Край: height:34.8px

Может кто-нибудь объяснить разницу в 1px между Chrome и Firefox на Mac? Или разница в 1px между Chrome на Mac и Chrome на Windows?

И почему это происходит только с размером шрифта 14px?

ИЗДАНО: пытался уточнить вопрос

Источник

0 ответов

Другие вопросы по тегам