使元素在 IE7 中垂直居中显示

Question

我可以让它在除 IE7 之外的所有浏览器中运行。

HTML

<span class="verticalMiddle"></span>
                        
<span class="jArrow inlineWrapper"></span>
                        
<h2 class="inlineWrapper">What is depression?</h2>

CSS

.inlineWrapper {
    width: 606px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

.verticalMiddle {
    vertical-align: middle;
    height: 50px;
    width: 0;
    display: inline-block;
}

.jArrow {
    background: url(http://www.healthquestlongbeach.com/images/library/faq/arrow.png) no-repeat left top;
    height: 20px;
    width: 22px;
}

h2.inlineWrapper {
    width: 563px;
    margin-right: 13px;
}

小提琴： http://jsfiddle.net/RfRrG/5/

问题是 h2 被推下购买 .verticalMiddle {height: 50px;}，但由于某种原因仅在 IE7 中（但不是.jArrow 由于某些奇怪的原因）。

我可以通过添加来解决这个问题

.inlineWrapper {display:inline;}

，但是它会在其他浏览器中破坏它。为什么文本被推下以及如何正确对齐它？

Answer 1

IE7 中的 display: inline-block 仅适用于自然内联的元素。

幸运的是，有一个简单的解决方法。将其替换

display: inline-block;

为：

display: inline-block;
*display: inline;

在大多数情况下，您还必须 添加 zoom： 1，但在您的情况下不是必需的。

* 是一个“安全黑客” 仅在 IE7 及更低版本中应用该属性。