Question

有没有人知道如何修复（明显的）IE渲染错误：之前/：在高度之后的td？

从它的外观来看，IE似乎只考虑：在/之后：伪元素与其内部的父<TD>内容一样高。如果<TD>＃1是x2行高w内容且<TD>＃2只有x1行内容，则IE将仅呈现：{/ 1}}＃2之后的：/之前：高达x1行的内容。

我在这里创建了一个小提琴示例来更好地说明我的问题：http://jsfiddle.net/231gnfpz/ 注意：我在：之前/：之后添加了一个红色背景，以便更好地帮助我在IE中查看我的问题

在我的示例中，我有一个中间<TD>我应用了：在/之后尝试在特定列的外部创建一个box-shadow。它是一个旧项目，所以我无法重写整个表格，FireFox / Chrome似乎没有问题，IE8-11似乎与我的问题相同：在/之后：有一个高度： 100％。

代码：

＆＃13;

<TD>

＆＃13;

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

＆＃13;

Answer 1

已解决： 此问题已在Windows 10的Internet Explorer的当前预览版本中得到解决。您现在可以通过http://remote.modern.ie从Windows或Mac OS X进行测试。如果您需要IE 11（及以下）支持，那么正在进行的解决方案仍然适合您。

一般而言，表格单元的尺寸主要取决于其内容。在这种情况下，我们可以看到伪元素的结果与共享单元容器中的相邻内容一样高。这就是Internet Explorer理解100%的意思。

您的伪元素绝对定位，并由相对定位的表格单元格约束。因此我们可以期望伪元素与约束元素一样高，而不是其相邻内容的高度。 Internet Explorer似乎在判断错误。

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

避免在这里使用伪元素，而是使用实际元素（见下文）
遍历您的元素，将其大小调整为其父元素的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中，您需要手动设置这些元素的高度。出于这个原因，我们将在documentMode对象上存在document属性时调整以下脚本：

(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应该在所有主流浏览器中保持一致。

我会在interop上内部提交一个bug。如果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();
        });
    }

}());

IE：之前/：在td上100％高度问题之后

1 个答案: