Wie ist die Beziehung zwischen Rand, Padding und Breite in verschiedenen Browsern?

Question

CSS-Breite Wert = Anzeige Breite von innen?

oder

CSS Breitenwert = Anzeigebreite von innen + CSS margin-left + CSS margin-right?

Answer 1

Sie müssen sich mit dem CSS Box Model vertraut machen. Es erklärt, wo Padding, Rand und Rahmen sowie Breite funktionieren.

Beachten Sie jedoch, dass verschiedene Browser dies anders implementieren: am bemerkenswertesten ist Internet Explorer has a box model bug (dies ist infamous in IE6 vorhanden - ich bin mir nicht bewusst, ob dies in IE7 oder IE8 behoben wurde), die den berüchtigten "quirks mode" CSS verursacht hacken.

Kurz gesagt, legte Internet Explorer ihr Box-Modell so an, dass sie die Breite in die Berechnung einbezog, im Gegensatz zum offiziellen Standard, bei dem die Breite nur den Inhalt darstellen sollte.

Answer 2

Es hängt nicht nur vom Browser und der Version ab, die Sie wählen, sondern auch vom Doctyp Ihres HTML-Dokuments. Der Internet Explorer im "quirks mode" unterscheidet sich beispielsweise komplett vom Internet Explorer mit doctype XHTML 1.0 Transitional.

Answer 3

Wie von anderen erwähnt, ist die Faustregel die CSS box model. Dies funktioniert im Allgemeinen wie von Browsern wie Opera, Firefox & Safari angekündigt. Der Internet Explorer ist die Ausnahme, bei der die "Breite" die Ränder, Abstände und Ränder enthält.

Es gibt einige großartige Tools, die visuell darstellen, wie der Browser den Inhalt gerendert hat. Für Firefox check out Firebug und für Internet Explorer die Developer Toolbar auschecken.

Answer 4

Here Sie können ein animiertes Diagramm sehen, das die Box "explodiert".

Answer 5

Ich denke, IE vor Version 6 falsch enthalten Grenzen und Polsterung in Breite und Höhe. Siehe: Microsoft Admits IE 5 is Messed Up