0

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

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

4

2 回答 2

2

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

*display : block;

如此编写的 *属性仅由 IE7 和更低版本处理。

我可以建议您对标签使用条件注释<html>吗？就个人而言，我使用：

<!--[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;
 }
于 2012-09-19T16:46:08.363 回答
1

在这种特殊情况下，问题是rem在 line-height 属性上使用单位。

通过简单地更改rem为em，它解决了 IE 中的问题。

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

于 2012-09-19T20:36:56.647 回答