选择高度的 IE7 问题答案

【问题标题】：IE7 issue with Select height选择高度的 IE7 问题
【发布时间】：2013-02-27 15:23:56
【问题描述】：

height: 22px;

在除 IE7 之外的所有浏览器中，文本都是垂直居中对齐的。

我尝试了这些 CSS 规则，但没有成功：

display: inline-block;
vertical-align: middle;
line-height: 12px;
padding:0 0 3px 0;

在 IE7 中，文本粘在底部。

我不会考虑为 IE7 标准设置的元标记。

有解决办法吗？

【问题讨论】：

标签： jquery html css internet-explorer internet-explorer-7

【解决方案1】：

对于 MSIE 浏览器，您需要预先设置输入和选择元素的字体规则...

input, select {font-family:'Times New Roman';font-size:100%; line-height:1.5em}

通常这是在reset.css 文件中完成的。您可以使用 IE 中的 View>Text Size 菜单来测试此要求...没有规则，选择和输入元素中的文本不会改变大小...使用规则...匹配其他浏览器。

MSIE 浏览器有一个设置“在网页中的按钮和控件上启用视觉样式”，这会影响 select 和其他表单元素的呈现。

将标签元素与控件对齐，我喜欢这种设计模式：

[label]Select:[select][option]this option[/option][/select][/label]

适用于 Apple 和 Mobile 类型的布局

[label]Select:[br/][select][option]this option[/option][/select][/label]

再次...您需要更改标签元素的默认样式规则，以使其与输入和选择元素保持一致。

label{font-size:100%; font-weight:bold}

【讨论】：

通过对选择元素使用高度，任何字体设置都不会影响 IE7 垂直对齐高度。我已经试过你的台词了。

【解决方案2】：

IE8 也存在此问题。我使用 IE8 和 IE7（开发人员工具）尝试了您的示例，它的行为相同。看看这个帖子：

IE8 - Vertical alignment of a <select> element with a custom height

这也表明，在 IE 中甚至不可能将选择元素居中：

how to make sure select option text align in the center in IE?

【讨论】：

【解决方案3】：

@尼玛

您也可以在 IE-Only 样式表中将 line-height 赋予 select。在我的一项任务中，我在 IE 中也遇到了同样的问题。所以，我所做的是，我制作了一个 IE only 样式表来定位 IE 并获得所需的结果。要制作IE-Only样式表，您可以参考this 或this。

【讨论】：

除了 line-height 实际上不会影响 IE7 中的选择。这是什么问题。