Inhalt

CSS-Wiki.com

CSS Wiki.com CSS 2.1 und CSS 3 Alle CSS­Eigenschaften auf einen Blick! CSS-Wiki.com

Problem Box-Modell

Grund allen Übels - Unterschiedliche Umsetzung des Box-Modells

Bei CSS- oder Browser-Hacks steht immer die Frage im Raum - warum ist das überhaupt notwendig. Was ist der Grund dafür? Das W3C hat im CSS-Standard festgelegt, wie das so genannte Box-Modell umzusetzen ist. Das Box-Modell ist dafür zuständig, wie Innen- und Außenabstände als auch Rahmenstärken von Block-Elementen im Browser dargestellt werden sollen.? 

Unterschiede der Darstellung

Um zu verdeutlichen, wie die Darstellungsunterschiede aussehen, ist mit folgedem CSS-Code ein Stück X-HTML gestylet worden: 

body {
   margin : 0;
   padding : 0;
}
#demo {
   font-family : verdana;
   padding : 0.6em;
   border : 0.5em solid gray;
   margin : 3.1em;
   width : 29em;
   color : blue;
   background-color : yellow;
}
#innen {
   font-size : 80%;
   padding : 0.5em 1.4em;
   margin : 0.5em;
   border : 0.6em solid #FF8000;
   height : 17.5em;
   background-color : #dedede;
}
#innen p {
   background-color : white;
   padding : 0.85em;
}
                   

Die Höhen- und Breitenangaben als auch die Schriftgröße sind willkürlich gewählt - in der Praxis aber ein normaler Quelltext. Die Maße sind so gewählt, dass die Boxen genau an das 25-Pixel-Raster, das über die Seite gelegt ist, angepasst sind. Diese Anpassung ist für den Firefox umgesetzt. 

Firefox 2.0.0.12

Screenshot Firefox 2.0.0.12 

Das CSS ist so umgesetzt, dass sich die Boxen im Firefox genau am Raster ausrichten. 

Internet Explorer 6.0

Screenshot Internet Explorer 6.0 

Internet Explorer 7.0

Screenshot Internet Explorer 7.0 

In diesem einfachen Beispiel sind die Darstellungsabweichungen für IE 6 und IE 7 gleich:
Der obere Abstand zwischen grauen und orangen Rahmen ist geringer als im Firefox. Der innere Block, der vom orangen Rahmen umgeben ist, überragt in der Breite ganz leicht das Raster. 

Da die Abweichungen für beide IE-Versionen oft gleich sind, sind die Anpassungen dann auch die gleichen. Man muss jedoch für jeden Browser einen individuelle Anweisung schreiben. 

/* Fix IE 6 */
* html #demo {
   padding : 1.0em 0.6em;
}
* html #innen {
   margin : 0.55em 0.55em 0.1em ;
   border-width : 0.55em;
   padding : 1.4em 1.5em;
   height : 15.7em;
}
* html #innen p {
   padding : 0.7em;
}
/* Fix IE 7 */
* + html #demo {
   padding : 1.0em 0.6em;
}
* + html #innen {
   margin : 0.55em 0.55em 0.1em ;
   border-width : 0.55em;
   padding : 1.4em 1.5em;
   height : 15.7em;
}
* + html #innen p {
   padding : 0.7em;
}
                   

Mit dem Star-HTML- bzw. Star-Plus-HTML-Hack werden sowohl Border-Stärken als auch Innen- und Außenabstände so verändert, dass der IE sich auch an das Raster anpasst. 

Opera 9.26

Screenshot Opera 9.26 

Auch der Opera kommt bei EM-Werten durcheinander. Die Höhenabstände sind ähnlich wie im IE 7 geringer, die Breite der p-Tags etwas ausgedehnter. 

Safari 3.0

Screenshot Safari 3.0 

Gerade bei der EM-Berechnung sind die Abstände beim Safari etwas geringer. Die Schrift wird im Vergleich zum Firefox und anderen auch kleiner dargestellt. Der graue Rahmen erreicht sowohl in der Breite als auch in der Höhe nicht die Ausmaße wie der Firefox. 

/* Safari */
html*#demo {
   padding : 0.7em 0.65em ;
   border : 0.55em solid gray;
}
html*#innen {
   padding : 0.5em 1.5em;
}
html*#innen p {
   padding : 0.9em;
}
                   

Auch beim Safari ist führt die Lösung über Anpassen der Border-Stärken und Innenabstände. 

Mozilla 1.7.13

Screenshot Mozilla 1.7.13 

Selbst beim Mozilla gibt es Darstellungsunterschiede zum Firefox - bei genauem Hinsehen sieht man, dass die untere Textbox die Rasterlinie minimal überschreitet. 

/* Fix Mozilla */
#innen p {
   /* Drehen an Komma-Stellen für Mozilla */
   padding : 0.825em ;
}
                   

Die Korrektur ist an der Stelle kein Hack, sondern Feinschliff - die Umstellung des Innenabstands von 0.85em auf 0.825em führt dazu, dass zumindet im konkreten Beispiel der untere Textblock sowohl im Firefox als auch im Mozilla mit der roten Linie endet. 

Zwei Möglichkeiten im Umgang mit Darstellungsunterschieden

Mit dem Trend zu barrierefreien Webseiten, damit Einzug der Skalierbarkeit, was das Aus für PUNKT und PIXEL und der Einsatz von EM und % bedeutet, treten Unterschiede in der Bildschirmausgabe vermehrt auf. 

De Facto gibt es nur zwei Möglichkeiten, wie mit diesen Darstellungsunterschieden umgegangen werden kann: 

  1. Man nimmt diese als naturgegeben an und akzeptiert leichte Abweichungen im Layout in unterschiedlichen Browser.
  2. Man stellt sich der technischen Herausforderung und hackt solange, bis die Darstellung in allen Browsern pixelgenau identisch ist.

Weiterführende Links

© 2008-2017 - Stephan Heller [daik.de]

Quatsch? Unsinn! Wie jetzt gleich?

Wir versuchen, alles zu testen und nur richtige Dinge zu schreiben, vielleicht haben wir aber hier und dort was übersehen, die Beschreibung ist in der Ausdruckweise nicht vollständig, oder es gibt Anregungen, was hier stehen sollte oder welcher Link noch fehlt.

Wir freuen uns über jede Anregung! Kurze Mail an mail@css-hack.de.


 
Anbieter: daik.de || hosted by Host Europe

CSS-Wiki.com || Foto Studio Köln || Barrierefreier kostenloser Webcounter