Warum stellen Chrome und Firefox Blockelementhöhen unterschiedlich dar?

Höhen werden in Chrome und Firefox unterschiedlich gerendert

Wenn Sie die Höhe eines Elements auf Blockebene auf „Auto“ oder 0–100 % einstellen, ohne die Höheneigenschaft des übergeordneten Elements explizit anzugeben, Die berechnete Höhe in Chrome kann von der in Firefox abweichen, insbesondere wenn das Element einen unteren Rand hat.

Warum das Unterschied?

Die W3C CSS2.1-Spezifikation besagt, dass height: 1 % automatisch berechnet werden sollte, wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird. Chrome folgt jedoch einer traditionelleren Interpretation und erfordert eine festgelegte Höheneigenschaft für das übergeordnete Element, damit prozentuale Höhen bei untergeordneten Elementen funktionieren.

Firefox und IE hingegen haben kürzlich ihre Interpretation erweitert, um Flex zu akzeptieren Höhen als Referenz für prozentuale Höhen. Diese Abweichung von der traditionellen Interpretation hat zu Darstellungsunterschieden in Browsern geführt.

Alternative Lösungen

Um das gewünschte Verhalten sowohl in Chrome als auch Firefox zu erreichen, ziehen Sie diese Alternativen in Betracht:

• Wenden Sie display: flex auf das übergeordnete Element an, wodurch align-items: stretch festgelegt wird und das untergeordnete Element gezwungen wird, sich vollständig auszudehnen Höhe.
• Verwenden Sie Position: relativ auf dem übergeordneten Element und Position: absolut; Höhe: 100 %; Breite: 100 % auf das Kind. Diese Methode überschreibt das Problem der prozentualen Höhe in Chrome.

Das obige ist der detaillierte Inhalt vonWarum stellen Chrome und Firefox Blockelementhöhen unterschiedlich dar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!