IE8 - 具有自定义高度的 <select> 元素的垂直对齐答案

【问题标题】：IE8 - Vertical alignment of a <select> element with a custom heightIE8 - 具有自定义高度的 <select> 元素的垂直对齐
【发布时间】：2012-03-01 07:39:20
【问题描述】：

在select 元素上应用自定义高度时，IE8 中的文本垂直对齐到底部： http://jsfiddle.net/4DYPf/8/

<select>
    <option value="1">123</option>
    <option value="1">456</option>
</select>

select
{
   border: 2px solid #CDCDCD;
   height: 50px;   
}

有没有办法居中对齐？

【问题讨论】：

你想在中间对齐什么？选项元素？还是选择元素到其父元素的中间？
选项元素（在 IE9、FF 和 Chrome 中的行为）。
你试过先搜索stackoverflow吗？ stackoverflow.com/questions/5439782/…, stackoverflow.com/questions/1911111/…,
是的，我发现了这些问题。第一个的答案并没有真正解决，第二个是关于水平对齐的。

标签： html css internet-explorer-8

【解决方案1】：

如果您将 padding:1em 0px; 添加到您的 select 样式中，它会将您的文本垂直对齐到中间，但也会挤压下拉箭头。

参见示例：http://jsfiddle.net/TfwsE/1/

【讨论】：

我尝试添加 padding 样式（这就是我在 IE8 中处理文本框的类似问题的方式，顺便说一句），但是箭头的外观并没有真正满足我的需要......
你考虑过 jQueryUI 自动完成组合框吗？它是高度可定制的jqueryui.com/demos/autocomplete/#combobox 我相信您可以删除自动完成功能。
另外，如果您将 SELECT 上的边框设置为 0，如果这是一个可能的选项，它看起来不会那么奇怪。

【解决方案2】：

这不是 css 答案，但如果您确实需要将文本居中并使用 jQuery，这是一种伪造对齐的方法：
http://jsfiddle.net/cadence96/7MZHv/1/
它包括在选择标签的空白处放置一个绝对范围，然后将所选选项的当前文本插入此范围内。这样您就可以按照自己的方式设置文本样式。

【讨论】：

谢谢，但我真的希望有一个仅 css 的解决方案（尽管显然它可能不存在）。此外，我正在处理一个应用程序，其中已经有几十个具有高度的 DropDownLists，因此必须添加 span 也是我希望避免的事情。