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

Question

input[type="number"]字段不显示某些字体系列（如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）。

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

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

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

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

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

Answer 2

问题的根本原因是字体大小超过了数字输入控件。

您的示例可以使用以下方法精确修复：

padding: 0.46rem 1rem;

---

解释

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

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

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

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

For some reason, when I change to height of your input field to anything above 40px it seems to work. Try this:

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;
}

I can't see why this fixes it though.

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" />