IE7 表达式与 table-cell 高度不相等

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表达式？

- Kid Diamond

---

你能创建一个jsfiddle吗？ - Daniel

你不能使用另一个只针对IE7的CSS文件吗？ - Richa

Answer 1

您需要将高度属性添加到'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;
}

- Karthik Naidu

Answer 2

在IE7上不支持display: 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和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%;

可能会有用。

- Kloe2378231