css - 即 :before/:after 100% height issues on td

Question

有没有人知道如何用 td 上的 :before/:after 高度修复(明显的)IE 渲染错误？

从外观上看，IE 似乎只认为 :before/:after 伪元素与父元素的 <TD> 一样高。里面的内容。如果<TD> #1 是 x2 行高 w 内容和 <TD> #2 只有 x1 行内容，IE 只会渲染 <TD> 的 :before/:after 高度#2 与 x1 行的内容一样高。

我在这里创建了一个 fiddle 示例来更好地说明我的问题:http://jsfiddle.net/231gnfpz/注意:我在 :before/:after 中添加了红色背景，以更好地帮助在 IE 中可视化我的问题

在我的示例中，我有一个中间 <TD>我应用了 :before/:after 来尝试在特定列的外部创建一个框阴影。这是一个旧元素，所以我无权重写整个表格，FireFox/Chrome 似乎对此没有问题，IE8-11 似乎与我的 :before/:after having a height:100% 有同样的问题.

代码:

table {
  background: grey;
  width: 100%;
}
table td {
  text-align: center;
  vertical-align: top;
  background: white;
  padding: 4px;
  width: 33.33%;
  position: relative;
}
.testTD:before {
  box-shadow: -15px 0 15px -15px grey inset;
  content: " ";
  height: 100%;
  left: -15px;
  position: absolute;
  top: 0;
  width: 15px;
  background: Red;
}
.testTD:after {
  z-index: 1;
  box-shadow: 15px 0 15px -15px grey inset;
  content: " ";
  height: 100%;
  right: -15px;
  position: absolute;
  top: 0;
  width: 15px;
  background: Red;
}

<table cellspacing="1" cellpadding "0" border="0">
  <tr>
    <td>test1</td>
    <td class="testTD">test1</td>
    <td>test1</td>
  </tr>
  <tr>
    <td>test2
      <br/>test2
    </td>
    <td class="testTD">test2</td>
    <td>test2</td>
  </tr>
  <tr>
    <td>test3
      <br/>test3
      <br/>test3
    </td>
    <td class="testTD">test3</td>
    <td>test3</td>
  </tr>
</table>

Answer 1

已解决: 此问题已在 Windows 10 上当前的 Internet Explorer 预览版中得到解决。您现在可以通过 http://remote.modern.ie 从 Windows 或 Mac OS X 测试此问题.如果您需要 IE 11(及更低版本)的支持，上述解决方案应该仍能满足您的需求。

一般来说，表格单元格的尺寸主要由其内容决定。在这种情况下，我们可以看到伪元素导致与共享单元格容器内的相邻内容一样高。这就是 Internet Explorer 对 100% 的理解。

您的伪元素是绝对定位的，并受相对定位的表格单元格的约束。按理说，我们希望伪元素与约束元素一样高，而不是其相邻内容的高度。 Internet Explorer 在这里似乎判断失误。

如果您希望在所有浏览器中使用相同的演示文稿，我建议进行以下更改:

1. 避免在此处使用伪元素，而是使用实际元素(见下文)
2. 循环你的元素，将它们的大小调整到它们父元素的 offsetHeight

所以你的标记看起来像这样:

<td class="testTD">
    <span class="bar"></span>
    <!-- content -->
    <span class="bar"></span>
</td>

然后您可以像处理原始伪元素一样相应地设置它们的样式:

.testTD .bar:first-child,
.testTD .bar:last-child {
    display: block;
    background: #F00;
    width: 15px; height: 100%;
    position: absolute; top: 0; z-index: 1;
    box-shadow: -15px 0 15px -15px grey inset;
}

.testTD .bar:first-child {
    left: -15px;
}

.testTD .bar:last-child {
    right: -15px;
}

在 Chrome 和 Firefox 中你已经设置好了。你不需要做任何进一步的事情。但是，在 Internet Explorer 中，您需要手动设置这些元素的高度。出于这个原因，我们将在 document 对象上存在 documentMode 属性的情况下设置以下脚本:

(function () {

  "use strict";

  if ( document.documentMode && document.documentMode < 12 ) {
      var spans = document.querySelectorAll( "span.bar" ),
          count = spans.length;
      while ( count-- ) {
          spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
      }
  }

}());

end-result应该在所有主要浏览器中保持一致。

我将基于互操作性的理由在内部提交一个错误。如果 Chrome 和 Firefox 以一种方式运行，而 Internet Explorer 以另一种方式运行，我们的团队应该考虑造成这种情况的原因。我会将这个问题添加到我打开的工单中，并确保在必要时更新这个答案。

在评论讨论后更新

评论中指出，在这种特殊情况下无法更改原始标记。脚本被正确地确定为此处可能的解决方案。

(function () {

    "use strict";

    // Get target cells, and create clone-able span element
    var tds = document.querySelectorAll( ".testTD" ),
        span = document.createElement( "span" );
        span.className = "bar";

    // Cycle over every matched <td>
    for ( var i = 0; i < tds.length; i++ ) {

        // Create references to current <td>, and a(fter)/b(efore) clones
        var t = tds[i], a = span.cloneNode(), b = span.cloneNode();

        // Insert cloned elements before/after <td> content
        t.appendChild( a );
        t.insertBefore( b, t.firstChild );

        // If the user is in Internet Explorer, avoid table-cell height bug
        if ( document.documentMode && document.documentMode < 12 ) {
            a.style.height = b.style.height = t.getBoundingClientRect().height + "px";
        }

    }

}());

如果您使用的是 jQuery，则可以更简洁地编写:

(function () {

    "use strict";

    // Create our clone-able element
    var span = $("<span></span>").addClass("bar");

    // Add cloned <span> elements at beginning/end of all .testTD cells
    $(".testTD").prepend( span.clone() ).append( span.clone() );

    // If the user is in Internet Explorer, avoid table-cell height bug
    if ( document.documentMode && document.documentMode < 12 ) {
        $(".testTD .bar").height(function () {
            return $(this).parent().outerHeight();
        });
    }

}());