Question

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

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

Answer 1

要使用CSS hack定位IE7，您可以添加以下显示规则：

*display : block;

如此编写的* 属性由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 */
}

这非常简单，您不必使用黑客攻击，这样可以更好地进行验证，并排除将来可能出现的干扰。

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

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

Answer 2

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

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

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

在IE7上使用内联块的不同行高

2 个答案: