选择框中的文本垂直对齐 - Firefox问题答案

【问题标题】：text vertical align in select box - firefox issue选择框中的文本垂直对齐 - Firefox问题
【发布时间】：2012-08-08 19:22:41
【问题描述】：

我在 Firefox 中遇到了选择框标题的垂直对齐问题。

用于选择的 CSS 如下所示：

select#cities_list {
    width: 95px;
    height: 45px;
    line-height: 45px;
    background: url('./img/select-arrow.png') no-repeat right transparent;
    -webkit-appearance: none;
    border: 1px solid #dcdcdc;
    border-left: none;
    border-right: none;
    padding: 0 10px;
    margin: 0;
    float: left;
}

在 Chrome 中一切看起来都很好：

救命！

【问题讨论】：

嗨，forkie，您解决了这个问题吗？如果是，那么请帮助我..!!

标签： firefox select vertical-alignment css

【解决方案1】：

我更喜欢的另一种方法是：

@-moz-document url-prefix() {

    select {
        padding-top: 8px;
    }
}

将padding-top 设置为您喜欢的任何值。 @-moz-document url-prefix() 括号内的任何内容都将仅在 Firefox 上执行。

【讨论】：

这是黑客行为吗？这会在未来的 Firefox 版本中持续存在吗？我将 padding-top: 4px 应用于选择输入，它解决了这个问题。似乎选择按钮确实只在 Firefox 上改变了它的垂直位置，但我担心某些未来的浏览器或未经测试的浏览器由于 4px padding-top 而不会对齐。对此你有什么想说的？提前致谢！
只是在这里补充一点，@-moz-document url-prefix() 在撰写本文时仍然适用于最新版本的 Firefox；火狐 61

【解决方案2】：

你可以试试这个

padding:.3em;/.4em;

取决于您的配置。

【讨论】：

那是什么鬼？我刚试过这个，它在大多数情况下都有效。这是什么黑客？
虽然我不知道为什么会这样......作为参考，你也可以说这样的话：padding:.3em .4em .3em .7em;/0;它似乎有效。
“em”是“相对字体”表示法 (dev.w3.org/csswg/css-values/#em-unit)。因此，您所做的只是将填充设置为具有相对字体大小的大小。这与 imo 相同，而不仅仅是将填充设置为 5px（例如）。它不如顶部的文本那么难看，但随着滚动按钮变小，它仍然不完美。此外，它会影响您不需要的水平填充。如果您必须使用它，请执行padding: 0 .3em;