IE Anzeige: Tabellenzellenkind ignoriert Höhe: 100%
Ich muss dynamisch eine Tabelle erstellen, um einige Daten aufzunehmen.
Ich habe den üblichen Ansatz der Verwendung von divs mit @ verfoldisplay: table
, display: table-row
unddisplay: table-cell
:
.tab {
display: table;
height:100%;
width: 200px;
}
.row {
height: 100%;
display: table-row;
}
.elem {
border: 1px solid black;
vertical-align: top;
display: table-cell;
height:100%;
background: blue;
}
.content {
height: 100%;
background: greenyellow;
}
<div class="tab">
<div class="row">
<div class="elem">
<div class="content">
Content
</div>
</div>
<div class="elem">
<div class="content">
Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
</div>
</div>
</div>
</div>
In den meisten Browsern erhalte ich die erwartete Ausgabe:
In IE8 (und möglicherweise in späteren Versionen, die ich noch nicht getestet habe) erhalte ich jedoch Folgendes:
Dasheight: 100%
Set auf der div Umgebung"Inhalt" wird ignoriert.
GemäßKann ich benutze, IE8 sollte vollständige Unterstützung für die zugehörigen Anzeigeeigenschaften bieten.
Ich habe eine Reihe ähnlicher Fragen zu SO durchgesehen, ohne eine funktionierende Lösung gefunden zu haben: Die meisten Lösungen basieren entweder auf Javascript (was ich vermeiden möchte), verwenden eine feste Höhe (wie oben angegeben) oder funktionieren nicht mit IE8 .