Warum ignoriert der IE „Höhe: 100 %' bei Tabellenelementen?

Warum IE Height: 100 % bei Tabellenelementen ignoriert

Problem

Bei Verwendung von CSS-Tabellenlayouts mit display: table, display: table-row , und display: table-cell, die Höhe von untergeordneten Elementen, die auf 100 % eingestellt ist, wird in IE-Browsern ignoriert.

Erklärung

Leider ist in der Spezifikation für das CSS-Tabellenlayout unklar, wie damit umgegangen werden soll Prozentuale Höhen für untergeordnete Elemente. Daher haben Browser dieses Verhalten unterschiedlich implementiert. Im IE werden prozentuale Höhen für Tabellenzellen nicht erkannt.

Auswirkungen

Diese Inkonsistenz kann zu unerwarteten Ergebnissen führen, wie in der Frage zu sehen ist, bei der der Inhalt in einer Tabellenzelle nicht passt wird im IE erwartet.

Lösung

Da ein reiner CSS-Workaround aufgrund der Interoperabilitätsprobleme nicht machbar ist, müssen alternative Ansätze in Betracht gezogen werden:

• Verwendung JavaScript: Legen Sie die Höhen der untergeordneten Elemente mithilfe von JavaScript dynamisch fest.
• Verwenden Sie eine feste Höhe: Geben Sie eine feste Höhe für die übergeordnete Tabelle und die untergeordneten Elemente an, um eine ordnungsgemäße Anzeige sicherzustellen.
• CSS-Tabellenlayout vermeiden: Erwägen Sie die Verwendung alternativer Layouttechniken wie Flexbox oder CSS-Raster.

Das obige ist der detaillierte Inhalt vonWarum ignoriert der IE „Höhe: 100 %' bei Tabellenelementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!