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

Question

我有一个带有以下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

盎司

IE

我该如何解决这个问题？

我尝试为IE添加此内容：

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

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

Answer 1

如果您不反对使用JQuery插件，可以尝试使用http://www.verot.net/jquery_select_skin.htm。你必须对它进行一些设计，但这很简单。

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

希望这有帮助。