imported>Trustable: -Kategorie:Web-Entwicklung

2025-05-16T22:25:52Z

Neue Seite

[[Datei:W3C and Internet Explorer box models.svg|mini|Schema von unterschiedlichen Interpretation der Größenangaben eines [[HTML]]-Blockelements]]

Der '''Box-Modell-Fehler''' (oder auch '''Box model bug''') ist ein [[Programmfehler]] in [[Microsoft]] [[Internet Explorer]] für [[Microsoft Windows|Windows]] bis einschließlich der Version 5.5. Der Fehler wirkt sich auf die von [[Webdesigner]]n definierten Maßangaben im [[Cascading Stylesheets|Stylesheet]] aus, da das Box-Modell in dem Browser fehlerhaft interpretiert wird.

== Hintergrund und Fehlerbeschreibung ==
In den CSS-Spezifikationen sind die grafischen Eigenschaften und Attribute für HTML-Elemente beschrieben, in denen Block-Elemente wie zum Beispiel das <code>p</code>-Tag eine Breite, einen Innen- und Außenabstand (''margin'' und ''padding'') besitzen.<ref>{{Internetquelle |url=https://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model |titel=Cascading Style Sheets, level 1. REC-CSS1-19990111 |werk=w3.org |hrsg=W3C Recomendation |datum=1999-01-11 |sprache=en |abruf=2025-03-12}}</ref> Anzumerken ist hier, dass die Spezifikation das Wort „Box-Modell“ nicht benutzt, es hat sich bei den Entwicklern und Browserherstellern als treffender Begriff etabliert. Vor der Einführung von [[HTML]] 4 und CSS gab es nur unzureichende Definitionen über die inneren und äußeren Abstände verschiedener Elemente.

Laut der Spezifikation des [[World Wide Web Consortium]]s (W3C) ist die definierbare Breite und Höhe eines Block-Elements unabhängig von dem Innen- und Außenabstand sowie der Rahmenbreite. Ein Element mit einer definierten Breite von 200 [[Pixel|px]], einem Innenabstand (''padding'') von 10 px und einem Rahmen (border) vom 5 px an jeder Seite hat demnach eine Gesamtbreite von 230 px (200 px + 10 px + 10 px + 5 px + 5 px).

Der Internet Explorer rechnet jedoch den Innenabstand sowie die Rahmendicke in die definierte Breite und Höhe mit ein, so dass der tatsächliche Platz im Inneren des Elements kleiner ist als vom Entwickler definiert wurde.<ref>http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3</ref>

== Betroffene Browser ==
Dieser Fehler tritt im Internet Explorer bis einschließlich der Version 5.5 auf<ref>{{Webarchiv|url=http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug |wayback=20110902022335 |text=Archivierte Kopie |archiv-bot=2023-06-18 06:36:46 InternetArchiveBot }}</ref>, aus Kompatibilitätsgründen sind auch aktuelle Versionen betroffen, sofern das Dokument im [[Quirks-Modus]] [[HTML-Rendering|gerendert]] wird. Die Versionen für den [[Macintosh]] hingegen zeigen das genannte Fehlverhalten nicht.

== Folgen und Fehlerbehebung ==
Die verringerte Größe der HTML-Elemente hatte zur Folge, dass die Aufteilung und Struktur der Webseite auseinanderbrach, wenn der Betrachter eine betroffene Internet-Explorer-Version nutzt. Es galt also, nur für diese [[Browser]] einen [[Workaround]] zu erstellen.

Einer der Workarounds machte sich einen weiteren Fehler des Internet Explorers beim Parsen der CSS-Regeln zunutze und wurde ''box model hack'' genannt. Entwickelt wurde er vom ehemaligen Microsoft-Mitarbeiter [[Tantek Çelik]].<ref>{{Internetquelle |url=http://tantek.com/CSS/Examples/boxmodelhack.html |titel=Box Model Hack |werk=tantek.com |sprache=en |abruf=2025-03-12}}</ref> Weil diese Workarounds sich auf weitere Fehler stützten und es unklar war, ob diese in späteren Browserversionen noch funktionieren, empfahlen einige Webentwickler den Einsatz von [[Conditional Comments]] für die unterschiedlichen Größendefinitionen.<ref>http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/</ref>

== Unterstützung und Befürworter der Fehlinterpretation ==
Einige Webentwickler hielten die (fehlerhafte) Interpretation des Box-Modells für die logischere Variante.<ref>{{Webarchiv|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |wayback=20100614070042 |text=Archivierte Kopie |archiv-bot=2019-08-27 21:59:25 InternetArchiveBot }}</ref><ref>{{Webarchiv|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ |wayback=20100227061437 |text=Archivierte Kopie |archiv-bot=2019-08-27 21:59:25 InternetArchiveBot }}</ref><ref>{{Internetquelle |url=http://quirksmode.org/css/user-interface/boxsizing.html |titel=CSS - box-sizing |werk=quirksmode.org |abruf=2025-03-12}}</ref>

Das W3C definierte für [[Cascading Stylesheets|CSS3]] das Attribut <code>box-sizing</code>, welches die unterschiedlichen Größenberechnungsmethoden der Block-Elemente frei wählbar macht. Dieses Attribut wird mittlerweile von den meisten modernen Browsern unterstützt.

== Weblinks ==
* [http://de.selfhtml.org/css/formate/box_modell.htm Erklärung des Box-Modells in CSS]
* [http://www.w3.org/TR/REC-CSS1-961217 CSS Level 1-Spezifikation]

== Einzelnachweise ==
<references />

[[Kategorie:HTML]]
[[Kategorie:Webbrowser]]
[[Kategorie:Cascading Style Sheets]]
[[Kategorie:Programmfehler]]

Box-Modell-Fehler im Internet Explorer - Versionsgeschichte

imported>Trustable: -Kategorie:Web-Entwicklung