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

【问题标题】：firefox not vertically centering select input content with height specifiedFirefox 不垂直居中选择指定高度的输入内容
【发布时间】：2011-12-25 22:35:13
【问题描述】：

这是正在发生的事情的图片：

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，两者都没有改变。

【问题讨论】：

在这里回答：stackoverflow.com/questions/5439782/…

标签： css select height vertical-alignment

【解决方案1】：

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

【讨论】：

这将“工作”，但它也会更改<select> 中的按钮，这是.. 看起来很丑。 i.imgur.com/V64sW.png

【解决方案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 中很好地居中，唯一的问题是箭头也在填充内......哦，好吧......有时我猜你赢不了。

【讨论】：

【解决方案3】：

试试这个 CSS 代码：

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

当您需要多个浏览器支持时，这应该可以工作。

【讨论】：