Wyrażenie IE7 nie równe wysokości komórki tabeli

Question

Jestem pionowym centrowaniem tekstu wieloliniowego za pomocą mojego kodu. Działa we wszystkich nowoczesnych przeglądarkach, ale nie w IE7. Przeszukałem i znalazłem wyraz CSS na CSS-Tricks, który powinien go naprawić.

Niestety wysokość elementu w IE7 nie jest 107px, wydaje się być większa. Właśnie dowiedziałem się o wyrażeniach CSS i mam małą wiedzę na ten temat.

Czy ktoś może wskazać problem i rozwiązanie?

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 
    ); 
} 

żywo przykład:JSFiddle

Nie sądzę JSFiddle obsługuje wyrażenia IE?

Answer 1

Musisz dodać wysokość: 107px; do "div", ale nie "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; 
} 

Answer 2

wyświetlacz: komórka tabeli nie jest obsługiwana w IE7. Wyrównanie w pionie nie jest stosowane. Zobacz tam:

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

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

To obejście wydaje się działać (testowane na 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> 

z "_" w CSS to kolejna obwodnica uwzględnione tylko przez IE (nie wiem dla IE9 & 10). FF, Chrome i Opera zignorują to.

Zachowaj ostrożność na wysokości: określa się ją w rozmiarze elementu rodzica. Jak zawsze w IE, rozmiar elementu jest stosowany, jeśli ustawiona jest wysokość (lub szerokość) wszystkich jego rodziców. Może być przydatne:

_height: 100%; 
_width: 100%; 

.