我正在创建一个在 IE7 中工作的网页。我想在对话泡泡中垂直居中一个跨度(可能有几行长)。我通过将 span 父级的 line-height 属性设置为 span 父级本身的高度，在现代浏览器中实现了这一点。然后为 span 赋予 display 属性 inline-block，它的 line-height 属性设置为与其字体大小和它的对应的东西vertical-align 属性设置为 middle。但是，当我尝试在 IE7 中查看它时，跨度文本的行高似乎不是跨度的行高，而是跨度的父级的行高。就好像 span 没有 inline-block display 属性，因为如果它是内联的，这就是你所期望的。由于 span 元素在默认情况下是内联的，您会期望 inline-block 属性在 IE7 中工作，但它不会。我尝试应用 zoom: 1; 和 'cross-browser inline block' suggested by css-tricks 之类的东西但这些都不起作用。我正在认真考虑使用表格，但我真的不想求助于此。
您可以在 http://jsfiddle.net/sAuhsoj/bWdwE/ 查看问题(您可能想使用 http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ 查看全屏版本 browserlab.adobe.com 以查看它在 IE7 中的外观)
最佳答案
要使用 CSS 黑客攻击 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 */
}
这真的很容易，而且您不必使用 hack，这更利于验证，并且会排除任何 future 可能的干扰。
在你的情况下，你可以为 IE7 设置一个全新的样式，比如
.userQuote .quoteText {
display: block;
line-height: a pixel value;
}
关于html - 在 IE7 上使用内联 block 的不同行高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12498885/