在 IE7 上使用 inline-block 不同的行高答案

【问题标题】：Different line heights using inline-block on IE7在 IE7 上使用 inline-block 不同的行高
【发布时间】：2012-09-20 04:36:56
【问题描述】：

我正在创建一个在 IE7 中工作的网页。我想在气泡中垂直居中一个跨度（可能有几行长）。通过将跨度父级的line-height 属性设置为跨度父级本身的高度，我在现代浏览器中实现了这一点。然后将跨度赋予display 属性inline-block，其line-height 属性设置为与其字体大小相对应的值，其vertical-align 属性设置为middle。但是，当我尝试在 IE7 中查看它时，跨度文本的行高似乎不是跨度的行高，而是跨度父级的行高。就好像跨度没有 inline-block 显示属性，因为如果它是内联的，这就是您所期望的。由于 span 元素默认是内联的，因此您可能希望 inline-block 属性在 IE7 中有效，但事实并非如此。我尝试过应用zoom: 1; 和'cross-browser inline block' suggested by css-tricks 之类的东西，但这些都不起作用。我正在认真考虑使用桌子，但这真的不是我想诉诸的东西。

您可以查看http://jsfiddle.net/sAuhsoj/bWdwE/ 的问题（您可能需要使用browserlab.adobe.com 查看全屏版本http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ 以了解它在IE7 中的外观）

【问题讨论】：

你试过 display:block 吗？
是的，它没有达到垂直居中的效果。它确实创建的效果是可以接受的，因为它只需要在 IE7 上显示，但不可能只在 IE7 中应用 display: block 而不使用

标签： html internet-explorer-7 inline css

【解决方案1】：

要使用 CSS hack 以 IE7 为目标，您可以添加以下显示规则：

*display : block;

这样写的 *property 仅由 IE7 及更低版本处理。

我可以建议你使用conditional comments on <html> tag吗？就个人而言，我使用：

<!--[if lt IE 8]>  <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]>  <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]>  <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->

然后我可以这样定位任何 IE 浏览器：

.ielt8 .anyClass {
    /* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
    /* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
    /* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
    /* any rule here will effect ie9 only */
}
.ie10 .anyClass {
    /* ie10, for future reference */
}
.ie .anyClass {
    /* any ie but 10 */
}

这真的很容易，而且您不必使用 hack，这更适合验证，并且可以排除任何未来可能的干扰。

在你的情况下，你可以为 IE7 设置一个全新的样式，比如

.userQuote .quoteText {
    display: block;
    line-height: a pixel value;
 }

【讨论】：

谢谢，Axel 解决了这个问题，但我仍然非常感谢您为纠正这个聪明、内容丰富的答案所做的所有努力。
Np。我也注意到了rem，但正如他已经指出的那样，我将其从我的答案中删除了；）

【解决方案2】：

在这种特殊情况下的问题是在行高属性上使用rem 单位。

只需将rem 更改为em，即可解决IE 中的问题。

http://jsfiddle.net/bWdwE/2/

【讨论】：