Warum rendern Chrome und Firefox prozentuale Höhen bei Elementen auf Blockebene unterschiedlich?

Höhen werden in Chrome und Firefox unterschiedlich dargestellt

Frage:

Beim Festlegen der Höhe eines Elements auf Blockebene auf einen Prozentsatz (z. B. 1 %), ohne die Höhe des übergeordneten Elements explizit festzulegen. Warum berechnen Chrome und Firefox die Höhe unterschiedlich, wobei Chrome den Po des untergeordneten Elements berücksichtigt? margin und Firefox nicht?

Antwort:

Die CSS-Standards besagen, dass eine prozentuale Höhe „automatisch“ berechnet wird, wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird.

Verschiedene Browser haben diese Bestimmung jedoch unterschiedlich umgesetzt:

• Webkit-Browser (Chrome, Safari) halten sich an die traditionelle Interpretation und erfordern, dass das übergeordnete Element eine festgelegte Höhe für prozentuale Höhen hat, um bei einfließenden untergeordneten Elementen zu funktionieren.
• Firefox und IE wurden erweitert Ihre Interpretation akzeptiert auch Flex-Höhen.

Diese Abweichung von der Spezifikation hat zu Inkonsistenzen beim Rendern geführt, da einige Browser Flex verwenden Höhen und andere, die eine festgelegte übergeordnete Höhe erfordern.

Alternative Lösungen:

Um eine konsistente Darstellung in allen Browsern sicherzustellen, sollten Sie eine der folgenden Alternativen verwenden:

• Stellen Sie die Anzeige des Elternteils auf „flex“, um automatisch die volle Höhe für Kinder zu aktivieren, die align-items verwenden: dehnen.
• Verwenden Sie position: absolute und position: relative für das übergeordnete bzw. untergeordnete Element, wobei das untergeordnete Element die Höhe hat: 100 %; Breite: 100 %. Dadurch können prozentuale Höhen auch ohne eine angegebene übergeordnete Höhe auf untergeordnete Elemente angewendet werden.

Das obige ist der detaillierte Inhalt vonWarum rendern Chrome und Firefox prozentuale Höhen bei Elementen auf Blockebene unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!