android - 当 input type=number 时，android 浏览器将输入框渲染得更小

Question

我正在尝试将一个带有数字输入的表单放在一起，该表单会通过移动设备上的数字键盘弹出。为此，我使用了 type=number 的输入。它在桌面上正确呈现(在这种情况下，它的外观和行为与 type=text 的输入完全一样)。在我的 Windows Phone 8 上，它也能正确显示并弹出数字键盘。

问题是当我在我的旧 Android (HTC One V) 上测试它时，数字输入呈现为比 type=text 的输入窄一点。你可以在这里看到我的代码标记:http://bootply.com/101579 .这成为一个问题，因为我创建了一个带有输入组插件的 Bootstrap 3 输入组。在我的 HTC Android 浏览器上，输入变得更短，因此输入框和 input-box-addon 之间存在间隙。

你可以明白我的意思: http://www.browserstack.com/screenshots/a989247294985fc48ab3c3be9f4d1151e301384a .当您查看许多 Android 设备(包括 Samsung Galaxy S III 和 HTC One X)的屏幕截图时，您会发现带有 type=number 的输入呈现得更窄。当您查看任何 iPhone 或 Motorola Droid 4 时，您可以看到正确呈现的表单。

是否有解决此问题的方法，使 type=number 的输入框与 type=text 的输入框的宽度相同？

编辑:我查看了模拟器列表，我意识到这只是 Android 4.x 库存浏览器上的一个问题。

编辑:上面的链接都不再有效。

Answer 1

试试这个 css 提示

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