IE: vor /: nach 100% Höhe Probleme auf td

Question

Hat jemand eine Idee, wie man einen (scheinbaren) IE-Rendering-Fehler mit dem: vor /: nach Höhen auf einem TD zu beheben?

Aus den Blicken scheint, IE nur zu denken, ein: vor /: nach Pseudo-Element ist so groß wie der Inhalt der Eltern <TD> in ihm. Wenn <TD> # 1 ist x2 Zeilen groß w Inhalt und <TD> # 2 hat nur x1 Zeile Inhalt, wird IE nur die: vor /: nach Höhe von <TD> # 2, um so hoch wie x1 Zeile Inhalt Inhalt sein.

Ich habe hier ein Geige Beispiel besser, mein Problem zu veranschaulichen: http://jsfiddle.net/231gnfpz/ Anmerkung: Ich habe einen roten Hintergrund auf dem hinzugefügt: vor /: nach besser zu helfen, mein Problem in IE

In meinem Beispiel zu visualisieren ich habe Mitte <TD>, dass ich eine: before /: nach angewendet habe, um zu versuchen, einen Box-Schatten außerhalb der spezifischen Spalte zu erstellen. Es ist ein altes Projekt, also habe ich keinen Zugriff, um die gesamte Tabelle neu zu schreiben, FireFox/Chrome scheint kein Problem damit zu haben, IE8-11 scheint das gleiche Problem mit meinem zu haben: vor /: nach einer Höhe: 100% .

Code:

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

Entschlossen:Dieses Problem in der aktuellen Vorschau behoben wurde von Internet Explorer unter Windows 10 baut können Sie derzeit testen diese von Windows oder Mac OS X über http://remote.modern.ie. Wenn Sie IE 11 (und darunter) Support benötigen, sollte die vorgehende Lösung für Sie noch ausreichen.

Im Allgemeinen haben Tabellenzellen ihre Abmessungen weitgehend durch ihren Inhalt bestimmt. In diesem Fall können wir sehen, dass das Pseudoelement dazu führt, dass es genauso groß ist wie der benachbarte Inhalt innerhalb des gemeinsam genutzten Zellencontainers. Das ist es, was der Internet Explorer unter 100% versteht.

Ihr Pseudo-Element ist absolut positioniert und durch die relativ positionierte Tabellenzelle eingeschränkt. Es liegt nahe, dass das Pseudoelement so groß wie das einschränkende Element ist und nicht die Höhe seines benachbarten Inhalts. Internet Explorer scheint hier einen Fehler zu machen.

Wenn Sie die gleiche Darstellung in allen Browsern mögen, würde ich folgende Änderungen vorschlagen:

1. Vermeiden hier Pseudoelemente verwenden und stattdessen tatsächliche Elemente verwenden (siehe unten)
2. Zyklus über Ihre Elemente sie zu ihrem Elternelement des offsetHeight

So Markup wie folgt aussehen würde Sizing:

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

Sie würden sie dann entsprechend stylen wie Sie die ursprünglichen Pseudo-Elemente haben:

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

In Chrome und Firefox bereits eingestellt sind. Sie müssen nichts weiter tun. In Internet Explorer müssen Sie die Höhe dieser Elemente jedoch manuell festlegen.Aus diesem Grund werden wir das folgende Skript auf das Vorhandensein eines documentMode Eigenschaft auf dem document Objekt Zustand:

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

}()); 

Die end-result sollte in allen gängigen Browsern konsistent sein.

Ich werde intern einen Fehler auf Interop Gründen ablegen. Wenn Chrome und Firefox sich so verhalten und Internet Explorer sich anders verhält, sollte unser Team die Gründe dafür berücksichtigen. Ich füge diese Frage zu dem Ticket hinzu, das ich öffne, und stelle sicher, dass diese Antwort bei Bedarf aktualisiert wird.

-Update folgende Diskussion in den Kommentaren

Es wurde in den Kommentaren darauf hingewiesen, dass der Original-Markup nicht in diesem speziellen Fall geändert werden könnte. Scripting wurde hier korrekt als mögliche Lösung identifiziert.

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

    } 

}()); 

Wenn Sie jQuery verwenden, könnte dies prägnant geschrieben mehr werden:

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

}());