Das Box-Modell: Internet Explorer vs. W3C

Heutzutage ist das Problem mit dem Internet Explorer-Boxmodell meist kein Problem mehr. Die meisten Webentwickler setzen ein <!DOCTYPE>Tag, um die Einhaltung von Standards durchzusetzen, und niemand kümmert sich mehr wirklich um die Unterstützung von Internet Explorer 5.5.

Doch einige Entwickler haben mit dem subjektiven, konzeptionellen Argumenten zur Verteidigung des IE - Box - Modells kommen. Sie haben behauptet, das IE-Box-Modell sei "intuitiver" als das W3C-Modell, da das W3C-Modell den Inhalt der Box misst, während das IE-Modell die Box selbst misst:

Ich kann ihren Standpunkt sehen, aber es ist im Grunde genommen ein subjektives Argument, und das Wichtigste ist die Einhaltung von Standards .

In letzter Zeit habe ich jedoch das IE-Box-Modell aus schwerwiegenden praktischen Gründen vorgezogen. Das W3C-Box-Modell erschwert die dynamische Größenänderung eines Elements auf die exakte Pixelbreite eines anderen Elements auf dem Bildschirm. Der Grund dafür ist, dass die style.widthEigenschaft eines Elements nicht die gesamte Bildschirmgröße des Elements berücksichtigt: Sie müssen auch zusätzliche Rahmen und Auffüllungen berücksichtigen. Dies ist kein Problem, wenn beide Elemente dieselbe CSS-Klasse verwenden. Wenn sie jedoch unterschiedliche CSS-Klassen haben, kann dies eine unglaubliche Herausforderung darstellen.

Angenommen, wir haben zwei Divs: A und B. A ist im HTML-Code als 400px-Div fest codiert, während B dynamisch mit Javascript erstellt wird. Visuell soll B die exakte Breite von A haben. Unter dem alten IE-Box-Modell ist dies trivial. Wir sagen einfach: B.style.width = A.style.widthoder sogar B.style.width = A.offsetWidth + "px".

Beim W3C-Box-Modell ist dies jedoch nicht so einfach. Jetzt müssen wir uns auch um Stylesheets kümmern. Wenn B dieselbe CSS-Klasse wie A hat, können wir nur sagen B.style.width = A.style.width. Aber wenn dies nicht der Fall ist - und wir möchten es aus ästhetischen Gründen vielleicht nicht -, sind wir in Schwierigkeiten. Jetzt müssen wir die Gesamtanzahl der Pixel in Rand und Auffüllung von A und B berücksichtigen. Dies kann besonders schwierig sein, wenn Rand und Auffüllung in inkonsistenten Einheiten angegeben werden (ein häufiges Vorkommen, da Rand häufig eine 1-Pixel-Linie ist, wohingegen Auffüllung kann in ems angegeben werden). Dann stehen wir vor der fast unmöglichen Aufgabe , in eine gemeinsame Einheit umzuwandeln (em in px oder px in em). All dies nur, um zwei Divs genau auf dem Bildschirm auszurichten.

Im Grunde genommen zwingt uns das W3C-Boxmodell, CSS-Rand- und Auffüllungsprobleme zu berücksichtigen, wenn wir die Größe eines Elements festlegen, wohingegen das IE-Boxmodell dies nicht tut, da die Breite die gesamte Größe der Box misst (End-to -end), anstatt den Inhalt der Box. Dies erleichtert die dynamische Größenänderung von Elementen in Bezug aufeinander erheblich.

All dies scheint ein ziemlich wichtiger Grund zu sein, das IE-Box-Modell dem W3C-Modell vorzuziehen (zumindest konzeptionell - natürlich ist das IE-Box-Modell in der Praxis tot).

Frage : Warum hat sich der W3C für dieses Boxmodell entschieden? Gibt es einige Vorteile des W3C-Box-Modells, die ich einfach nicht sehe? Oder übertreibe ich das Problem hier einfach?

Die Wahl, ob Abstand und Rand in die Breite einbezogen werden sollen oder nicht, war willkürlich. Das einzige, worauf es ankam, war das Erstellen von mehrspaltigen Layouts. Sie sollten jedoch berücksichtigen, dass zu diesem Zeitpunkt ohnehin Tabellen für Layouts verwendet wurden. Für sie schien diese Sorge nicht wichtig genug zu sein, und sie hielten es für viel wertvoller, die genaue Breite angeben zu können, die der Inhalt selbst in CSS einnehmen würde.

Für heutige Entwickler sieht die Situation völlig anders aus, da sie CSS für Layouts verwenden und sich mit dem CSS-Boxmodell auseinandersetzen müssen. Zum Glück haben wir die Möglichkeit, Boxregeln zu überschreiben, sodass in den meisten Fällen die einfache Regel oben in Ihrem Stylesheet hervorragend funktioniert:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Um Jeff Kaufman zu diesem Thema zu zitieren :

In Anbetracht der Tatsache, dass die Spezifikation es anders definiert, wäre das Signal, das es an Microsoft gesendet hätte, um ihre Fehlinterpretation zu übernehmen, schlecht für das Web gewesen. Microsoft verfolgte bereits einen Umarmungs-, Erweiterungs- und Löschansatz, bei dem absichtlich Produkte hergestellt wurden, die sich von denen der Wettbewerber unterschieden, um Benutzer an die Microsoft-Versionen zu binden. Sie kamen dem Erfolg mit dem Web sehr nahe: Von ungefähr 2000 bis 2005 war IE so beliebt, dass viele Websites nur dafür entworfen wurden. Die Übernahme des IE-Ansatzes hier hätte Microsoft dann möglicherweise mitgeteilt, dass Sie mit dem IE tun können, was Sie wollen, und dass wir die Standards anpassen, um ihn legal zu machen.

So fiel das Box-Modell dem Machtkampf zwischen W3C und Microsoft zum Opfer.