虽然我的网站不是最好的,但它是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;
答案 0 :(得分:1)
表单元素是HTML / CSS中最不可靠的部分,涉及跨浏览器呈现的一致性。特别是框模型的一些属性(height
与border
或padding
)are troublesome结尾。
引用那篇文章:
开发人员尝试通过将这些元素[
input
,select
]转换为块级元素来解决此问题。 [...]解决此问题的常见模式是避免使用height
属性,而是使用font-size
和padding
属性。
em
作为border-radius的单位,为了在旧浏览器中实现可伸缩性,尤其是IE 6-8,您可以为所有长度单位选择em
。我把你的小提琴分开,包括那些想法。见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;
}