安卓平板浏览器选择框高度兼容性问题

Question

虽然我的网站不是最好的，但它是 HTML 的混合体，甚至没有响应，但它在除 Android 浏览器之外的所有浏览器中都能按预期工作。我在 Android 浏览器中的选择框下方有一个屏幕截图，然后在所有其他浏览器中都有一个屏幕截图。我真的不确定如何解决这个问题，因为我通常会通过反复试验最终解决问题，就像我说的那样，我的代码真的不是那么好!

非常感谢任何帮助 :) 非常感谢。

Android(使用 www.modern.ie 测试):

其他浏览器:

选择框的 CSS:

#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;

Answer 1

在跨浏览器呈现一致性方面，表单元素是 HTML/CSS 中最不可靠的部分之一。尤其是盒子模型的一些属性(height in conclusion with border or padding)are troublesome .
引用那篇文章:

Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.

1. 一个很棒的 CSS 集合是 normalize.css .您应该考虑使用它(的一部分)，以获得尽可能多的渲染一致性。
2. 您已经在使用 em 作为 border-radius 的单位，为了在旧浏览器(尤其是 IE 6-8)中的可扩展性，您可以为所有长度使用 em单位。

我已经 fork 了你的 fiddle ，以包含这些想法。参见 http://jsfiddle.net/Volker_E/4v3sm71g/

顺便说一句，Android 4.4 上的 Chrome v36.0.x 默认情况下没有显示任何差异。