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

Question

我想在移动应用程序上使用HTML输入类型=“数字”，以便向智能手机（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想要为输入的type =“number”时出现在某些浏览器上的无用旋转器腾出空间一样。

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

Answer 1

实际上提问者本人非常接近答案，因为他知道这是微调器的错误，幸运的是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/

希望它有所帮助。

Answer 2

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

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

Answer 3

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

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

Answer 4

我无权访问较旧的iOS设备进行测试，但这适用于现代iOS，同时谷歌Chrome已经开始违反宽度：所以这修复了两者：

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