IE浏览器：before /：after td上的高度为100％ [英] IE :before/:after 100% height issues on td

问题描述

有人知道如何用tbe上的：before /：after高度修复（明显的）IE渲染错误吗？

Does anyone have an idea on how to fix an (apparent) IE rendering bug with the :before/:after heights on a td?

从它的外观来看，IE似乎只认为：before /：after伪元素与父级的< TD>一样高。 里面的内容。如果< TD> ＃1的内容高x2行，而< TD> ＃2仅具有x1行IE只会将< TD> ＃2的：before /：after高度渲染为x1行内容的高度。

From the looks of it, IE seems to only think a :before/:after pseudo element is as tall as the parent's <TD> content inside of it. If <TD> #1 is x2 lines tall w content and <TD> #2 has only x1 line of content, IE will only render the :before/:after height of <TD> #2 to be as tall as x1 line's worth of content.

我在这里创建了一个小提琴示例来更好地说明我的问题： http：// jsfiddle。 net / 231gnfpz /
注意：我在：before /：after之后添加了红色背景，以更好地显示IE中的问题

I created a fiddle example here to better illustrate my problem: http://jsfiddle.net/231gnfpz/ note: I added a red background to the :before/:after to better help visualize my problem in IE

在在我的示例中，我有一个中间的< TD> ，我应用了一个：before /：after来尝试在特定列的外部创建一个盒子阴影。它是一个旧项目，所以我无权重写整个表，FireFox / Chrome似乎对此没有问题，IE8-11的高度：100％似乎与我的：before /：after有相同的问题。

In my example I have a middle <TD> that I applied a :before/:after to try to create a box-shadow to the outside of the specific column. Its an old project so I don't have access to rewrite the entire table, FireFox/Chrome seem to have no issue with this, IE8-11 appear to have the same problem with my :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>

推荐答案

已解决： 此问题已在Windows 10上的Internet Explorer的当前预览版本中得到解决。您目前可以通过 http://remote.modern.ie 。如果需要IE 11（及更低版本）支持，则后续解决方案仍将满足您的需求。

Resolved: This issue has been resolved in current preview builds of Internet Explorer on Windows 10. You can presently test this from Windows, or Mac OS X via http://remote.modern.ie. If you require IE 11 (and below) support, the proceeding solution should still suffice for you.

通常来说，表单元格的尺寸主要取决于他们的内容。在这种情况下，我们可以看到伪元素导致与共享单元容器中的相邻内容一样高。这就是Internet Explorer理解 100％的意思。

Generally speaking, table cells have their dimensions determined largely by their content. In this case, we can see that the pseudo-element results in being equally as tall as the neighboring content within the shared cell container. This is what Internet Explorer understands 100% to mean.

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

Your pseudo element is positioned absolutely, and constrained by the relatively positioned table cell. It stands to reason then that we would expect the pseudo element to be as tall as the constraining element, rather than the height of its neighboring content. Internet Explorer appears to be making a mistake in judgment here.

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

If you'd like the same presentation across all browsers, I would suggest the following changes:

1. 在此处避免使用伪元素，而应使用实际元素（见下文）


2. 循环遍历元素以调整其大小到其父元素的 offsetHeight

1. Avoid using pseudo elements here, and instead use actual elements (see below)
2. Cycle over your elements sizing them to their parent element's offsetHeight

所以您的标记应如下所示：

So your markup would look like this:

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

然后您将像对待原始伪元素一样对它们进行相应的样式设置：

You would then style them accordingly as you did the original pseudo elements:

.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 属性的情况下，对以下脚本进行条件调整： / p>

In Chrome and Firefox you are already set. You don't need to do anything further. However, in Internet Explorer you will need to manually set the heights of these elements. For this reason, we'll condition the following script on the presence of a documentMode property on the document object:

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

}());

最终结果在所有主流浏览器中都应该保持一致。

The end-result should be consistent across all major browsers.

我将基于互操作性在内部对此提交一个错误。如果Chrome和Firefox的行为方式是一种，而Internet Explorer的行为方式是另一种，则我们的团队应考虑这种情况的原因。我会将这个问题添加到我打开的票证中，并确保根据需要更新此答案。

I will file a bug on this internally on interop grounds. If Chrome and Firefox are behaving one way, and Internet Explorer is behaving another, our team should consider the reasons for this being so. I'll add this question to the ticket I open and be sure to update this answer as necessary.

在评论中进行讨论后更新

在注释中指出，在这种特殊情况下不能更改原始标记。

It was noted in the comments that the original markup could not be changed in this particular case. Scripting was correctly identified as a possible solution here.

(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，则可以更简洁地编写：

If you're using jQuery, this could be written more concisely:

(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浏览器：before /：after td上的高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！