使用某些字体系列时，占位符对于 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

出于某种原因，当我将输入字段的高度更改为 40px 以上时，它似乎可以工作。尝试这个：

input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 41px;
    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;
}

我不明白为什么这可以修复它。