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

2019年7月28日 136次阅读

input [type =“number”]字段没有在最新的firefox中显示某些字体系列的占位符文本,如font-family：’Open Sans’;.当前版本是Firefox Quantum 57.0.2(64位)

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

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

《css – 使用某些字体系列时,firefox上的输入类型编号完全不可见占位符》

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

最佳答案 这是你的边境物业.

我不确定为什么它会在CodePen上发生,因为它在JSBin上看起来很好,而在你发布的代码片段中的StackOverflow上.也许它的CodePen与Quantum的效果不佳.

无论如何,这是发生了什么：

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

您的输入高度设置为40px. 40px必须包括边框,填充顶部,填充底部以及元素本身的高度.您的行高也设置为40px.你的填充样式(你有两个规则设置,所以它拾取第二个)是填充：.5rem 1rem;.

在这40个分配的像素中,输入文本没有足够的空间.
《css – 使用某些字体系列时,firefox上的输入类型编号完全不可见占位符》

问题：40px线高度顶部填充底部填充> 40像素

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

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

《css – 使用某些字体系列时,firefox上的输入类型编号完全不可见占位符》

点赞