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

Question

input[type="number"]字段没有在font-family: 'Open Sans';等特定字体系列的最新firefox中显示占位符文本。当前版本是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）中。

您的输入高度设置为40px。 40px必须包括边框，填充顶部，填充底部以及元素本身的高度。您的行高也设置为40px。你的填充样式（你有两个规则集，所以它拿起第二个）是padding: .5rem 1rem;。

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

问题：40px线高+顶部填充+底部填充> 40px

至于修复，我假设你想保持你的填充并让你的输入大小相同。您可能需要缩小字体大小或使输入更大。 40px不足以填充和40px线高。或者您可以删除该边框属性。

有点在我看来，Chrome和Firefox上的这个属性之间的区别在于Chrome忽略了行高。在Chrome上的此屏幕截图中，输入的高度为22px，即使您的行高为22px。

Answer 2

问题的根本原因是font-size超出了输入控件的数量。

您的示例可以通过使用以下方式进行预先修复：

padding: 0.46rem 1rem;

---

EXPLAINED

当填充应用于数字类型输入时，填充以正常方式应用于框的边界，但是在一些浏览器中，相对于所应用的填充量发生裁剪。

裁剪效果根据输入箭头控件的内部边界计算。

裁剪仅影响占位符，因为它们位于输入图层后面，并在移动输入字段的内部边界以覆盖它时隐藏。

https://codepen.io/anon/pen/qpZPKd

有多种方法可以避免这种情况，但我的建议是避免在输入元素上填充并使用其他方法来创建所需的效果。

---

做个魔术师

我个人认为在输入字段中没有任何理由使用垂直填充。 Line-height做得更好。

如果你不能让浏览器做你想做的事情让用户认为浏览器正在做你想要的！

body {
  padding: 2rem;
}

.Wrap{
  box-sizing: border-box;
  height: 40px;
  border: 1px solid tomato;
  padding: .5rem 1rem;
}
.Wrap input {
  width: 100%;
  height: 100%;
  line-height: 40px;
  border: none;
  font-family: 'Open Sans';
  background-color: deepskyblue;
}

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

Codepen示例https://codepen.io/anon/pen/QaNOdo

Answer 3

出于某种原因，当我将输入字段的高度更改为高于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;
}

我不明白为什么这会解决它。

Answer 4

编辑

你在css输入声明中使用了两次PADDING ......

只需删除第一个：padding: 0 10px;

并保持：padding: .5rem 1rem;

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

input[type="number"] {
    
    // line-height: 1.5;
}

<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />