firefox不垂直居中选择指定高度的输入内容

Question

这是最近发生的事情的图像：

http://imageshack.us/photo/my-images/217/ffbug.png/

这是我的代码：

select {
    width: 150px;
    height: 40px;
    padding-left: 10px;
}

在chrome和firefox中，它完全垂直对齐选择值。在Firefox中，值会粘在选择的顶部。

我尝试添加vertical-align: middle和line-height: 40px，两者都没有改变。

Answer 1

在该元素上使用padding-top: 10px; padding-bottom: 10px;。您的文字将自动居中。

Answer 2

我决定用这段代码把它放在一个div中：

.search li select {
    padding: 0px;
    margin: 0px;
}
.search li div {
    height: 32px;
    padding: 10px 10px 0px 10px;
    background: #ffffff;
}

div背景与选择背景相同。

它非常适合FF IE和Chrome，只有箭头在填充内部......哦，好吧......有时你不能赢我猜。

Answer 3

试试这个CSS代码：

@-moz-document url-prefix() {
  select {
    padding-top: 13px;
  }
}

如果您需要多个浏览器支持，这应该可以使用。