在 iPhone iOS/Safari 上显示 HTML 输入类型编号的缺陷答案

【问题标题】：Display flaw with HTML input type number on iPhone iOS/Safari在 iPhone iOS/Safari 上显示 HTML 输入类型编号的缺陷
【发布时间】：2011-10-13 05:24:55
【问题描述】：

我想在移动应用程序上使用 HTML input type="number"，以便向更智能的手机（Android、iPhone 和其他一些）表明数字键盘对用户来说比普通键盘更有趣一。这很好用。

所以，我这里有这段 HTML：

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

这里应用的重要 CSS 元素是：

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

应该这样呈现：

以上是从 iOS 4.1 截取的屏幕截图，当时世界还不错。同样在 Android 手机上，一切正常。但是看看 iOS 4.2、4.3 上发生了什么：

突然之间，数字字段变得不那么宽了，就好像 iPhone 想要为输入类型为“数字”时出现在某些浏览器上的无用微调器腾出空间。

有人知道这样的问题吗？你怎么修好它的？或者解决它？有没有其他方法可以让手机更喜欢数字键盘？或者我可以应用一些专有的 css 样式来撤消这个额外的右边距？

【问题讨论】：

标签： html ios css numbers html-input

【解决方案1】：

不确定这是否有帮助，但尝试将这些行添加到 input css

-webkit-box-sizing: border-box;
box-sizing: border-box;

【讨论】：

'-webkit-appearance: none;' 呢？
我之前已经试过了。这消除了漂亮的阴影，但边距仍然存在：-/

【解决方案2】：

实际上提问者本人非常接近答案，因为他知道这是 spinner 的错，幸运的是 webkit 允许用户通过 CSS 控制它：

input[type="number"]::-webkit-outer-spin-button { display: none; }

来源：REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT

现场演示：http://jsbin.com/aviram/5/

希望对您有所帮助。

【讨论】：

做到了！太感谢了。令人难以置信的是，在经历了可恶的 Internet Explorer 6 的所有麻烦之后，现在 Webkit 出现了一个新的 CSS 怪诞剧集......
您好，请参阅我新接受的答案。不幸的是，display: none 与input { width: 100% } 结合使用会导致更多问题：-/ 也许你也可以使用它
感谢您的评论。据我所知，“-webkit-appearance: none;”对于 webkit UI 元素更有用。

【解决方案3】：

虽然 vincicat 的解决方案（之前被赏金接受）起初似乎有效，但它揭示了 Webkit 浏览器中的另一个渲染缺陷。在 10 次页面刷新中的 2 次中，输入以零宽度呈现，当放入 <td> 并使用 width: 100% 设置样式时...

在这里找到了一个更好的解决方案（对于我的用例）：

Disable webkit's spin buttons on input type="number"?

它由以下 CSS 样式组成：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

有趣的补充：我发现黑莓的 WebKit 浏览器中的 <input type="number"/> 字段存在严重缺陷。它似乎是浏览器崩溃的根源。话虽如此，我们不再使用该 HTML 5 功能...

【讨论】：

感谢您的提问和回答。它对我有帮助，就像我在使用 Blackberry 时使用 a similar issue 一样。

【解决方案4】：

我无法使用较旧的 iOS 设备对其进行测试，但这适用于现代 iOS，同时 Google Chrome 也开始不遵守宽度：因此，这解决了这两个问题：

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}

【讨论】：