IE7表達式不等於表格單元高度

我用我的代碼垂直居中多行文本。它適用於所有現代瀏覽器，但不適用於IE7。我搜索了一下，發現了一個CSS-Tricks的CSS表達式，可以解決這個問題。IE7表達式不等於表格單元高度

不幸的是，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表情？

來源

2013-12-10 Kid Diamond

你可以做一個[jsfiddle]（http://jsfiddle.net/）？ – Daniel

不能使用另一個只針對IE7的css？ – Era

您需要添加高度：107px;到'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; 
}

來源

2013-12-16 09:35:50

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%;

可能有用。

來源

2013-12-16 12:22:59 Kloe2378231

IE7表達式不等於表格單元高度

回答

相關問題