Warum unterscheiden sich Browser in der Art und Weise, wie sie die Breite von HTML-Elementen einschließlich der Auffüllung berechnen?

Frage: Unterschiede bei der Berechnung der Elementbreite zwischen Browsern

In verschiedenen Webbrowsern gibt es Unterschiede in der Breite eines HTML-Elements wird im Hinblick auf die Polsterung berechnet. Im Internet Explorer wird der Abstand in die Breitenmessung einbezogen, in Firefox jedoch nicht.

Box-Modell verstehen

Um dieses Verhalten zu verstehen, müssen wir es wissen über das Boxmodell in CSS. Jedem Element in HTML wird ein Feld zugewiesen, das aus vier Teilen besteht:

• Inhaltsbereich: Enthält den tatsächlichen Inhalt des Elements.
• Padding: Leerraum um den Inhalt.
• Rand: Die Linie um die Polsterung.
• Rand: Raum außerhalb Grenze.

Standard-„Content-Box“-Modell

Die meisten modernen Browser, einschließlich Firefox, verwenden das Standard-„Content-Box“-Modell. In diesem Modell umfasst die Breite eines Elements nur den Inhaltsbereich, ohne Polsterung und Ränder.

Nicht-Standard-„Border-Box“-Modell

Internet Explorer, In älteren Versionen wurde das nicht standardmäßige „Border-Box“-Modell verwendet. In diesem Modell umfasst die Breite eines Elements Auffüllungen und Ränder, wodurch das Element größer erscheint.

Browser konsistent machen

Um das Verhalten in allen Browsern konsistent zu machen, haben wir kann die Box-Sizing-Eigenschaft verwenden. Mit dieser Eigenschaft können wir angeben, welches Box-Modell Browser verwenden sollen.

* {
  box-sizing: border-box;
}

Indem wir die Box-Größe auf „Border-Box“ setzen, zwingen wir alle Browser, dieses Modell zu verwenden, bei dem die Breite Auffüllungen und Ränder umfasst. Dadurch wird das Element in Internet Explorer und Firefox gleich groß angezeigt.

Zusätzliche Hinweise:

• Opera erfordert eine spezielle Deklaration zur Unterstützung der Boxgröße : border-box.
• WebKit-Browser (Safari und Chrome) unterstützen die Padding-Box-Box nicht Modell.
• Legacy-Versionen des IE erfordern möglicherweise einen gültigen Doctype und entsprechende Header, um dem Standard-Box-Modell zu entsprechen.

Das obige ist der detaillierte Inhalt vonWarum unterscheiden sich Browser in der Art und Weise, wie sie die Breite von HTML-Elementen einschließlich der Auffüllung berechnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!