jquery - 选择高度的 IE7 问题

Question

height: 22px;

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

我尝试了这些 CSS 规则，但没有运气：

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

在 IE7 中，文本粘在底部。

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

有解决办法吗？

Answer 1

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

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

这还指出，甚至不可能在 IE 中将选择元素居中：

如何确保选择选项文本在 IE 中居中对齐？

Answer 2

对于 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}

Answer 3

@尼玛

您也可以在仅 IE样式表中提供行高以供选择。在我的一项任务中，我在 IE 中也遇​​到了同样的问题。因此，我所做的是，我制作了一个仅针对 IE 的 IE 样式表并获得所需的结果。要制作IE-Only样式表，您可以参考this或this。