Html CSS与Select元素的跨浏览器兼容性

我有一个带有以下CSS的表单

select

元素：

    border:solid 0 #000;
    background: transparent url("../images/input_fld.png") no-repeat;
    height:42px;
    width:275px;
    padding-left:10px;
    padding-right:0px;
    font-family: monospace;

这将生成如下所示的选择框：

Webkit

Moz

IE

我怎样才能解决这个问题

我尝试为IE添加以下内容：

<!--[if IE]>
<style>
form select {padding-bottom:10px;}
</style>
<![endif]-->

---

虽然这确实解决了文本底部对齐的问题，但也引入了将向下箭头向上推10px的问题。

如果您不反对使用JQuery插件，可以尝试使用。你将不得不设计一点样式，但这相当简单

该插件不支持IE6，但我相信这是最好的：）另外，尝试在CSS中添加一行高度，等于选择框的高度，在本例中为42px

---

希望这能有所帮助。

在相同的跨浏览器和跨操作系统中设置表单元素的样式非常困难。我认为如果你必须设计它们，最好使用JS替代品（但要确保它是可访问的）。这里有一篇关于表单控件样式的好文章：您可能想看看Formalize.me（）。也许你能从中找到一些想法。