Warum ignoriert mein „display: table-cell'-Kind „height: 100 %' im Internet Explorer?

IE-Anzeige: Tabelle-Zelle Kind ignoriert Höhe: 100 %

Problem:

Bei der Verwendung von CSS zum dynamischen Erstellen eines Tabellenlayouts ignoriert das div mit display: table-cell die Eigenschaft height: 100 % im Internet Explorer 8 und möglicherweise spätere Versionen.

Antwort:

Haftungsausschluss: Dieses Problem ist auf das Fehlen einer klaren Spezifikation für Höhenprozentsätze in der Anzeige zurückzuführen : Tabellenzeile und Anzeige: Tabellenzellenelemente.

Leider definiert die W3C-Spezifikation nicht, wie Höhenprozentsätze sein sollen in diesen Elementen interpretiert und überlässt es der Browser-Implementierung. Daher können einige Browser, einschließlich der Internet Explorer-Versionen 8 bis 11, prozentuale Höhen in Tabellenlayouts möglicherweise nicht konsistent verarbeiten.

Mögliche Problemumgehungen:

• Vermeiden Sie prozentuale Höhen:Verwenden Sie feste oder absolute Höhen für die Tabelle Zellen.
• Verwenden Sie eine andere Tabellenlayoutmethode: Erwägen Sie die Verwendung von CSS Grid, Flexbox oder einer Kombination aus beiden, um dieses Problem im IE zu vermeiden.
• Verwenden JavaScript:Verwenden Sie JavaScript, um die Höhen der Tabellenzellen dynamisch festzulegen.
• Nutzen Sie ein CSS Präprozessor:Verwenden Sie einen CSS-Präprozessor wie Sass oder Less, um Pixelwerte für die Tabellenzellenhöhen zu berechnen und anzugeben.

Hinweis:

Es ist wichtig Denken Sie daran, dass eine reine CSS-Lösung möglicherweise nicht möglich ist, wenn Sie Internet Explorer 8 und spätere Versionen unterstützen müssen, da das Verhalten bei diesen Versionen inkonsistent ist Browser.

Das obige ist der detaillierte Inhalt vonWarum ignoriert mein „display: table-cell'-Kind „height: 100 %' im Internet Explorer?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!