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

Question

虽然我的网站不是最好的，但它是HTML的混搭，甚至没有响应，它在除Android浏览器之外的每个浏览器中都能正常工作。我在Android浏览器的选择框下面有一个secreenshot，然后在其他所有浏览器中。我真的不确定如何解决这个问题，因为我最终通过反复试验解决问题，就像我说我的代码真的不太好！

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

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与border或padding）are troublesome结尾。
引用那篇文章：

  

开发人员尝试通过将这些元素[input，select]转换为块级元素来解决此问题。 [...]解决此问题的常见模式是避免使用height属性，而是使用font-size和padding属性。

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

我把你的小提琴分开，包括那些想法。见http://jsfiddle.net/Volker_E/4v3sm71g/

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

Answer 2

#form .input-select {
  ? float:right; ?
   clear:right;
}

#form label {
  ? float:left; ?
   clear:left;
}