Получение элементов для отображения вертикально по центру в IE7 - PullRequest
Новая
       16

Получение элементов для отображения вертикально по центру в IE7

1 голос
/ 01 сентября 2011

Я могу заставить это работать во всех браузерах, кроме 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;}

Но тогда это ломает его в других браузерах. Почему текст сдвигается вниз и как его правильно выровнять?

1 Ответ

2 голосов
/ 01 сентября 2011

display: inline-block в IE7 работает только с естественными элементами.

К счастью, есть простой обходной путь. Заменить это: 

display: inline-block;

с этим: 

display: inline-block;
*display: inline;

В большинстве случаев вы также должны добавить zoom: 1, но в вашем случае это не требуется.

* - это «безопасный взлом» , который применяет свойство только в IE7 и ниже.

...