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

时间:2014-08-07 11:25:01

标签: android css forms compatibility

虽然我的网站不是最好的,但它是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;

2 个答案:

答案 0 :(得分:1)

表单元素是HTML / CSS中最不可靠的部分,涉及跨浏览器呈现的一致性。特别是框模型的一些属性(heightborderpaddingare troublesome结尾。
引用那篇文章:

  

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

  1. 一个很棒的CSS集合是normalize.css。您应该考虑使用它的(部分),以获得尽可能多的渲染一致性。
  2. 您已经使用em作为border-radius的单位,为了在旧浏览器中实现可伸缩性,尤其是IE 6-8,您可以为所有长度单位选择em
  3. 我把你的小提琴分开,包括那些想法。见http://jsfiddle.net/Volker_E/4v3sm71g/

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

答案 1 :(得分:0)

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

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