Warum rendern Chrome und Firefox die Höhen für Prozent- und „Auto'-Werte unterschiedlich?

Höhen werden in Chrome und Firefox unterschiedlich dargestellt

In CSS wird die Höhe eines Elements auf Blockebene auf einen Prozentsatz oder „Auto“ festgelegt, ohne die Höhe des übergeordneten Elements anzugeben kann zu unterschiedlichen Höhenberechnungen in den verschiedenen Browsern führen. Chrome und Firefox zeigen beispielsweise unterschiedliche Verhaltensweisen.

Warum „height: 1 %“ automatisch berechnet wird

In Ihrem Beispiel mit height: 1 %, berechnet Chrome die Höhe des Div als der Rand unten plus die Inhaltshöhe des p-Elements. Dies liegt daran, dass gemäß der CSS-Spezifikation „auto“ für Prozentsätze berechnet wird, wenn die Höhe des übergeordneten Elements nicht explizit festgelegt und das Element nicht absolut positioniert ist.

Flex-Höhe des übergeordneten Elements

Andere Die Diskrepanz zwischen Chrome und Firefox liegt in der Handhabung der prozentualen Höhen in der Flexbox. Chrome und Safari priorisieren die flexible Höhe des übergeordneten Elements, während Firefox und IE11/Edge die Gesamthöhe des übergeordneten Elements priorisieren.

Browser-Interpretation

Die Sprache der CSS-Spezifikation in Bezug auf Höhenprozentsätze ist etwas vage und lässt Raum für Interpretationen von Browser-Herstellern. Herkömmliche Interpretationen erfordern einen festgelegten Höhenwert für das übergeordnete Element, dem Browser wie Chrome und Safari folgen. Allerdings haben Firefox und IE diese Interpretation um Flex-Höhen erweitert.

Alternative Lösungen

Um eine konsistente Höhendarstellung in allen Browsern sicherzustellen, ziehen Sie diese Alternativen in Betracht:

• Verwenden display: Flex auf dem übergeordneten Element und align-items: stretch auf dem untergeordneten Element, um die Größe des untergeordneten Elements auf die des vollständigen übergeordneten Elements einzustellen Höhe.
• Wenden Sie Position: absolut mit Höhe: 100 % und Breite: 100 % auf das untergeordnete Element an, während Sie Position: relativ auf das übergeordnete Element festlegen.

Das obige ist der detaillierte Inhalt vonWarum rendern Chrome und Firefox die Höhen für Prozent- und „Auto'-Werte unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!