在使用某些字体系列时，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）。

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

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

问题： 40px线高+顶部填充+底部填充＆gt; 40像素

至于修复，我假设你想保留你的填充并让你的输入大小相同。您可能需要缩小字体大小或使输入更大。 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做得更好。

如果您无法让浏览器按照您的意愿行事，那么用户会认为浏览器正在按照您的意愿行事！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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