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 属性上使用单位。

通过简单地更改remem,它解决了 IE 中的问题。

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

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