IE7 espressione non uguale all'altezza table-cell

Question

che sto verticalmente centratura testo su più allineato con il mio codice. Funziona in tutti i browser moderni, ma non in IE7. Ho cercato in giro e mi ha trovato un'espressione CSS su CSS-Tricks che dovrebbe risolverlo.

Purtroppo l'altezza dell'elemento in IE7 non è 107px, sembra essere più grande. Ho appena scoperto le espressioni CSS e ho poca conoscenza al riguardo.

Qualcuno potrebbe indicare il problema e la soluzione?

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

vivo esempio:JSFiddle

Non credo JSFiddle supporta le espressioni di IE?

Answer 1

è necessario aggiungere altezza: 107px; a "div" ma non a "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

display: table-cell non è supportato su IE7. Quindi l'allineamento verticale non viene applicato. Vedi là:

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

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

Questo by-pass sembra funzionare (testato su 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> 

Il "_" nel CSS è un altro bypass presa in considerazione solo da IE (non sono sicuro di IE9 & 10). FF, Chrome e Opera lo ignoreranno.

Attenzione all'altezza: è definito sulla dimensione dell'elemento genitore. Come sempre su IE, viene applicata una dimensione di elemento se sono impostati tutti i relativi altezza (o larghezza) dei genitori.

_height: 100%; 
_width: 100%; 

può essere utile.