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'

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

显示：IE7不支持table-cell。因此不应用垂直对齐。看到那里：

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

非常有用。

IE7表达式不等于表格单元格高度

2 个答案: