在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; }

来源:输入类型中的移除旋转控制= WEBKIT中的数字

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

希望它有所帮助.

Answer 2

虽然vincicat的解决方案(之前已经接受了赏金)似乎最初起作用,但它揭示了Webkit浏览器中的另一个渲染缺陷.在10个页面刷新中的2个中,输入呈现为零宽度,当放入<td>并使用样式设置时width: 100%...

在这里找到了一个更好的解决方案(对于我的用例):

在输入类型="数字"上禁用webkit的旋转按钮？

它由以下CSS样式组成:

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

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