IE7の式がテーブルセルの高さと等しくない

Question

私は、コード内に複数行のテキストを垂直方向にセンタリングしています。現代のすべてのブラウザで動作しますが、IE7では動作しません。私は周りを検索し、それを修正すべきCSS-Tricksの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の表現をサポートしていないと思いますか？

Answer 1

身長を追加する必要があります：107px; 'div'には 'p'ではなく '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は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で（IE9 & 10についてわからない）IEのみで考慮されて別のバイパスです。 FF、ChromeとOperaはそれを無視します。

高さに注意してください：親要素のサイズで定義されています。 IEではいつものように、親の高さ（または幅）がすべて設定されている場合、要素サイズが適用されます。

_height: 100%; 
_width: 100%; 

が有用であり得る。