Question

有一个简单的例子，有2个输入。一个使用自定义谷歌字体，另一个使用默认浏览器字体。

https://plnkr.co/edit/kh7KbhdLjjDn6niy8rzt?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
  </head>

  <body>
    <input type="text" value="jgyq">
    <input type="text" value="jgyq" class="custom-font">
  </body>

</html>

input {
  font-size: 16px;
}

.custom-font {
  font-family: 'Open Sans';
}

如果您尝试选择输入文本并向上或向下拖动，您会注意到输入文本跳到1-4px到顶部或底部（实际上取决于行高，高度输入属性，但总是跳转）

尝试过不同的填充，线高，高度属性。

我使用了行高：1.2; +填充：6px 0;过去具有crossbrowser输入（高度）的属性。有没有其他好的方法来设置crossbrowser文本输入与这样的跳跃和其他问题。（IE11 +，现代Chrome，FF，O）

输入文本在IE11中跳了一下

0 个答案: