css - 使用某些字体系列时，Firefox 上的输入类型编号的占位符完全不可见

Question

input[type="number"] 字段在最新的 firefox 中不显示某些字体系列的占位符文本，例如 font-family: 'Open Sans';。当前版本是 Firefox Quantum 57.0.2(64 位)

还是不知道有些字体家族没有这个问题

请查看演示链接 https://codepen.io/anon/pen/zpqzEB

body {
  padding: 2rem;
}

input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  background: #fafafa;
  border: 1px solid tomato;
  padding: .5rem 1rem;
  font-family: 'Open Sans';
  background-clip: content-box;
  background-color: deepskyblue;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />

Answer 1

这是您的边框属性。

我不确定为什么它会在 CodePen 上发生，因为它在 JSBin 和 StackOverflow 上看起来不错，在您发布的代码段中。也许是 CodePen 不能很好地与 Quantum 配合使用。

无论如何，这是正在发生的事情:

border-box 属性将使填充和边框包含在元素的总宽度和高度中 (w3schools.com)。

您的输入高度设置为 40 像素。 40px 必须包括边框、padding-top、padding-bottom 和元素本身的高度。您的行高也设置为 40px。您的填充样式(您设置了两个规则，因此它选择第二个)是 padding: .5rem 1rem;。

在这 40 个分配的像素中没有足够的空间容纳输入文本。

问题:40px 行高 + 顶部填充 + 底部填充 > 40px

至于修复，我假设您希望保留填充并让输入大小相同。您可能需要缩小字体或放大输入。 40 像素的填充和 40 像素的行高是不够的。或者您可以删除该 border-box 属性。

在我看来，这个属性在 Chrome 和 Firefox 上的区别在于 Chrome 忽略了行高。在 Chrome 上的这个屏幕截图中，输入的高度是 22px，即使你的行高是 22px。