Position und Größe von :: vor Pseudo-Elementen in Internet Explorer

Question

Ich machte this pedigree diagram aus verschachtelten Tabellen, mit ::before Pseudo-Elemente, um die Linien zwischen den Feldern zu bauen. Es funktioniert hervorragend in Chrome und Firefox, aber im Internet Explorer 11 sind die Pseudo-Elemente zu kurz und an der falschen Stelle.

Hier ist der relevante CSS:

#pedigree td:first-child { 
    width: 8em; 
    padding: 3px; 
    position: relative; 
} 
tr.s > td:first-child::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 2px; 
    height: 50%; 
    border: solid gray; 
    border-width: 1px 0 0 1px 
} 
tr.d > td:first-child::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 50%; 
    width: 2px; 
    height: 50%; 
    border: solid gray; 
    border-width: 0 0 1px 1px 
} 

Jede pseudo-Element soll die Hälfte der Höhe sein seiner <td> enthält; für .s die untere Hälfte und für .d die obere Hälfte. Das Paar von Pseudoelementen bildet zusammen eine [ Form.

in Chrom und Firefox, die top, bottom und height werden als Prozentsatz der Höhe der <td> interpretiert. In IE scheinen sie als Prozentsätze der Entfernung zwischen der Spitze des <td> und dem oberen Rand seines Inhalts interpretiert zu werden.

Wie kann ich das Aussehen in IE den anderen Browsern anpassen?

Answer 1

Tabellenelemente verhalten sich nicht wie Standardkästen. Es gibt Attribute, die für solche Elemente nicht offiziell definiert sind (zB position). Einige Browser haben sie trotzdem implementiert, andere nicht. Daher werden Sie seltsame/unterschiedliche Verhaltensweisen bekommen.

---

Gerade div s innerhalb der td und gelten alle Styling (sowie Pseudo-Elemente) zu diesem Wrapper verwendet Verpackung. Ihre Tabellen benötigen ebenfalls eine Höhe.

Siehe hier: https://jsfiddle.net/8dhwqvyj/1/

HTML:

[...] 
<td> 
    <div class="td-wrapper"> 
     <div class="td-content"> 
      <!-- cell content --> 
     </div> 
    </div> 
</td> 
[...] 

CSS:

table[data-level="0"] { height: 400px; } 
table[data-level="1"] { height: 200px; } 
table[data-level="2"] { height: 100px; } 
table[data-level="3"] { height: 50px; } 
table[data-level="4"] { height: 25px; } 

#pedigree td:first-child > .td-wrapper { 
    width: 10em; 
    padding: 3px; 
    position: relative; 
} 
td > .td-wrapper > .td-content { 
    display: inline-block; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
tr.s > td:first-child > .td-wrapper::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 2px; 
    height: 50%; 
    border: solid gray; 
    border-width: 1px 0 0 1px 
} 
tr.d > td:first-child > .td-wrapper::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: 50%; 
    width: 2px; 
    height: 50%; 
    border: solid gray; 
    border-width: 0 0 1px 1px 
}