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

Posted 2023-03-05

【中文标题】使用某些字体系列时，对于 Firefox 上的输入类型号，占位符完全不可见

【英文标题】：placeholder fully not visible for input type number on firefox when using certain font family

【发布时间】：2018-06-02 00:01:31

【问题描述】：

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

【问题讨论】：

您是否尝试过使用line-height？

@Soolie 是的，输入属性中有line height

我在 Quantum 上，我觉得它看起来不错，所以也许是您页面上的另一种样式让它坏了？

@kauffee000 请查看演示链接codepen.io/anon/pen/zpqzEB

@MuhammedAthimannil 也适合我。

【参考方案1】：

这是您的边框属性。

我不确定为什么它会在 CodePen 上发生，因为它在 JSBin 和 *** 上看起来都不错，在您发布的 sn-p 中。也许是 CodePen 不能很好地与 Quantum 配合使用。

无论如何，这就是正在发生的事情：

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

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

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

问题：40px 行高 + 上边距 + 下边距 > 40px

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

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

【讨论】：

这是一个关于 Quantum 的 jsbin，只是为了表明它在这里工作而不是 Codepen。 jsbin.com/wawohubobo/edit?html,css,output

【参考方案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

【讨论】：

改变填充影响设计。除input[type="number"] 外，所有输入字段均正常工作。同时其他字体没有这样的问题:-)

【参考方案3】：

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

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;

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

【参考方案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" />

【讨论】：

使用 padding 在 Chrome 上可以正常工作，但在 Firefox 上不行。我认为 OP 正在尝试解决差异