input type="number"在Firefox v60中显示异常，如何修复？

我之前碰到过类似的情况，Firefox 60对数字输入框的默认渲染逻辑和Chrome确实不一样，尤其是自带的上下步进按钮很容易导致布局错位或者样式不符合预期。这里有几个实用的修复方案，你可以根据自己的需求选：

1. 隐藏默认步进按钮，统一成文本框样式 #

这是最直接的解决办法，让Firefox的数字输入框看起来和Chrome的一致（或者说和普通文本输入框一致），用Firefox专属的CSS属性重置样式：

/* 移除Firefox默认的步进按钮 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

解释：-moz-appearance: textfield会强制Firefox把数字输入框渲染成普通文本框的样子，去掉自带的上下箭头，这样就不会有因为按钮导致的布局异常了。如果之后需要自定义步进按钮，完全可以自己用JS+HTML实现，样式更可控。

2. 自定义Firefox步进按钮的样式 #

如果你想保留步进按钮，只是调整它的样式让它和Chrome的看起来一致，可以针对Firefox的伪元素做样式修改：

/* 调整步进按钮的位置和样式 */
input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
  width: 18px;
  height: 50%;
  padding: 0;
  border: none;
  background-color: #f5f5f5;
}

/* 把按钮定位到输入框右侧 */
input[type="number"]::-moz-number-spin-box {
  justify-content: flex-end;
}

这样可以把步进按钮调整成更贴近Chrome的样式，避免布局错位。

3. 统一跨浏览器的基础布局样式 #

有时候显示异常是因为不同浏览器对输入框的默认padding、border、字体大小等属性不一致导致的，给输入框设置统一的基础样式就能解决：

input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box; /* 确保padding和border不会增加输入框总宽度 */
  /* 加上Firefox的按钮重置 */
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 聚焦样式也统一一下，提升体验 */
input[type="number"]:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

一般来说，第一种方案就能解决大部分Firefox下的显示问题，你可以先试试这个，如果需要保留步进按钮再用第二种方案。

内容的提问来源于stack exchange，提问作者Ommadawn