在iPhone iOS / Safari上显示HTMLinputtypes编号的缺陷
我想在移动应用程序上使用HTMLinputtypes=“数字”，以便向智能手机（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想要在inputtype =“number”时为某些浏览器上出现的无用微调器腾出空间。
有谁知道这样的问题？ 你怎么修好它的？ 或者解决它？ 有没有其他的方法可以让手机更喜欢数字键盘？ 还是有一些专有的CSS风格，我可以申请撤销这个额外的右边距？
实际上，提问者本人非常接近答案，因为他知道这是微调者的错，幸运的是webkit允许用户通过CSS控制它：
input[type="number"]::-webkit-outer-spin-button { display: none; }
来源： 取消自动控制inputtypes=在WEBKIT的数量
现场演示： http : //jsbin.com/aviram/5/
希望它有帮助。
尽pipevincicat的解决scheme（之前被赏金接受）似乎起初起作用，但它揭示了Webkit浏览器中又一个渲染缺陷。 在10个页面刷新中，有2个input是以零宽度呈现的，当放在<td> ， width: 100% 。
在这里find了一个更好的解决scheme（用于我的用例）：
在inputtypes=“数字”上禁用webkit的旋转button？
它由这些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 5function…
不知道这是否有帮助，但尝试将这些行添加到input CSS
-webkit-box-sizing: border-box; box-sizing: border-box;