css - 如何设置标签或跨度等内联对象的垂直对齐方式在为 IE7-8 设置文本对齐等于中心的行中?

标签 css internet-explorer-8 internet-explorer-7

IE9 rendered image

上图是我网站过滤一些数据的HTML。我在此文本对齐中心线中有 2 个标签和 2 个选择。所有元素都显示为内联。一切都在 IE9 RC 和 Chrome 9 上完美运行。但它在 IE7 和 IE8 上不起作用,因为所有标签中的文本都显示在行的底部,如下图所示。

IE7 rendered image

你有解决这个问题的 CSS 吗?您可以编辑我的 jsFiddle 来尝试解决这个问题。

http://www.jsfiddle.net/AaDkd/

更新#1 我尝试将所有相关元素的行高设置为当前行的高度。但它不适用于 IE7。

enter image description here

源代码:http://jsfiddle.net/AaDkd/1/

演示:http://fiddle.jshell.net/AaDkd/1/show/

更新#2

enter image description here

如您所见,我删除了所有样式的控件,但是当我使用 IE7 时,选择和标签中文本的垂直中心并不完全相等。这是因为选择的默认高度(在 IE7 中无法调整)和标签或跨度的高度不相等。

源代码:http://jsfiddle.net/AaDkd/5/

演示:http://fiddle.jshell.net/AaDkd/5/show/

附言。不要忘记此行的文本对齐是居中的。

谢谢,

最佳答案

查看您的示例,以下 CSS 适用于 IE8、FF、Chrome。

label, select, button {
    vertical-align: middle;
}

更新: 我在 IE7 上检查过它,如果您不在选择上设置那些行高和高度,它工作正常。唯一的问题是您不能在 IE7 中更改选择的高度,这在我看来是这样。

UPDATE2:这是您的 Update#2 Fiddle 在 IE7 中为我显示的方式:

Fiddle screenshot

关于css - 如何设置标签或跨度等内联对象的垂直对齐方式在为 IE7-8 设置文本对齐等于中心的行中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5003667/

相关文章:

javascript - 在输入值之前/之后添加不可编辑的文本而不更改值

java - 使用 selenium webdriver java 无法在 IE8 中找到元素

jquery - IE8 问题 - 元素使用错误的变换原点设置动画

css - IE7 复选框对齐问题

javascript - 简单的三元运算不起作用

css - Ng Template Bootstrap 不接受我的 CSS 类

html - 如何创建 HTML/CSS 响应磁贴?

css - IE8 中的圆 Angular 图像

javascript - 按钮标签在 IE 7 中不起作用

jquery - 为什么 .html() 在 Internet Explorer 7 中不起作用