javascript - 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

需要加上height: 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;
}