Выражение IE7 не равно высоте таблицы

Я по вертикали центрирую многострочный текст с моим кодом. Он работает во всех современных браузерах, но не в IE7. Я искал и нашел выражение CSS в CSS-трюках, которое должно исправить его.

К сожалению, высота элемента в IE7 не равна 107px, она, по-видимому, больше. Я только что узнал о выражениях CSS и мало знаю об этом.

Может ли кто-нибудь указать проблему и решение?

CSS

p.caption {
    display: table-cell; 
    height: 107px;
    padding: 15px 10px;
    border-bottom: 1px solid #cecece;
    font-size: 16px;
    text-shadow: 0 0 1px #868686;
    text-align: center;  
    vertical-align: middle;
}

IE7 CSS

p.caption {
    clear: expression(
        style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
        style.clear = "none", 0
    );
}

Пример в реальном времени: JSFiddle

Я не думаю, что JSFiddle поддерживает выражения IE?

Ответ 1

Вам нужно добавить height: 107px; to 'div', но не 'p'

div#fullWidth{
  display: table;
  width: 200px;
  background: #dddddd;
  height: 107px;
}

p.caption{
  display: table-cell;
  padding: 15px 10px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}

Ответ 2

display: table-cell не поддерживается в IE7. Поэтому вертикальное выравнивание не применяется. См. Там:

http://quirksmode.org/css/css2/display.html

http://www.kamui.co.uk/2012/01/23/css-display-table-cell-table-row-table-in-ie7/

Этот байпас, похоже, работает (проверен на IE7/8 и FF25):

CSS

div#fullWidth {
    display: table;
    width: 200px;
    background: #dddddd;
    height: 107px;
}

p.caption {
    display: table-cell; 
    border-bottom: 1px solid #cecece;
    font-size: 16px;
    text-shadow: 0 0 1px #868686;
    text-align: center;  
    vertical-align: middle;
    _margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0":(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}

HTML:

<div id="fullWidth">
    <p class="caption">Testing 1,2,4,5,6,7,8,9,10 1,2,4,5,6,7,8,9,10</p>
</div>

"_" в CSS - это еще один обход, учитываемый только IE (не уверен в IE9 и 10). FF, Chrome и Opera будут игнорировать его.

Будьте осторожны с высотой: он определяется по размеру родительского элемента. Как всегда в IE, размер элемента применяется, если установлены все его родители (или ширина).

_height: 100%;
_width: 100%;

может быть полезным.