Warum unterscheiden sich Chrome und Firefox bei der Berechnung der Höhen für Elemente auf Blockebene mit prozentualen Höhen?

Darstellungsunterschiede in Chrome und Firefox für Höhen

Problem

Festlegen der Höhe eines Elements auf Blockebene auf „Auto“ oder „0~100 %“ " Ohne explizite Angabe der Größe des übergeordneten Elements führt dies zu unterschiedlichen Höhenberechnungen in Chrome und Firefox. Im Fall von „Höhe: 1 %“ berechnet Chrome die Höhe als unteren Rand plus Inhaltshöhe, Firefox hingegen nicht. Dieses Verhalten unterscheidet sich, obwohl die CSS-Spezifikation besagt, dass „Höhe: 1 %“ als „Auto“ berechnet werden sollte, wenn die Höhe des übergeordneten Elements nicht explizit festgelegt ist.

Ursache

Während das W3C Standards dafür bereitstellt Browser haben Browserhersteller die Freiheit, diese Standards unterschiedlich zu implementieren. In diesem Fall interpretieren Chrome und Firefox die Eigenschaft „height“ unterschiedlich.

Chrome folgt einer traditionelleren Interpretation der Spezifikation und erfordert eine festgelegte Höhe auf dem übergeordneten Element, damit prozentuale Höhen bei untergeordneten Elementen funktionieren. Firefox und IE haben ihre Interpretation kürzlich erweitert, um auch Flex-Höhen zu akzeptieren.

Alternative Lösungen

Um diese Inkonsistenz zu beheben, sollten Sie die Verwendung einer dieser Alternativen in Betracht ziehen:

• Display Flex: Stellen Sie „display: flex“ auf dem übergeordneten Element ein, wodurch automatisch „align-items: stretch“ und festgelegt werden erweitert das untergeordnete Element auf die volle Höhe des übergeordneten Elements.
• Absolute Positionierung: Stellen Sie „Position: relativ“ auf dem übergeordneten Element und „Position: absolut; Höhe: 100 %; Breite: 100 %“ ein. „auf das Kind. Dies ermöglicht die Verwendung einer prozentualen Höhe ohne Angabe einer Höhe auf dem übergeordneten Element.

Das obige ist der detaillierte Inhalt vonWarum unterscheiden sich Chrome und Firefox bei der Berechnung der Höhen für Elemente auf Blockebene mit prozentualen Höhen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!