当 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 设备（包括三星 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; }