Inhalt

NEU: CSS-Wiki.com

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

Internet Explorer 6.x

Star-HTML-Hack:

Der Stern * dient als Universal-Selektor und ist in CSS 3 vorgesehen.
* vor den Selektor html geschrieben ist eigentlich sinnlos, wird von allen Browsern deswegen ingoriert. Nur der Internet Explorer 6 interpretiert folgende CSS Anweisung.

CSS Code-Beispiel

* html div {
   width : 20em;
}

Bewertung

Da dieser Hack ausschließlich den IE 6 trifft, ist er ideal geeignet.
Auch in Zukunft wird diese Schreibweise wahrscheinlich von keinem anderen Browsern interpretiert. 

Alternative Bezeichnungen

Generelles zum Internet Explorer 6.x

Ich wage zu behaupten, dass Programmierer über keinen Browser so viel fluchen wie über den IE 6.  

Im Wesentlichen sind zwei Dinge für die abweichende Darstellung im IE6 verantwortlich: 

1. Falsche Implementierung von margin und padding bei relativen Einheiten. Dies führt dazu, dass Abstände anders dargestellt werden als in anderen Browsern.   

2. Fehlende Unterstützung von max-height, min-height, max-width und min-width. Height und width werden genauso dargestellt werden, wie die min-Äquivalente. Das führt dazu, dass, falls mehr Platz benötigt wird, Inhalte im IE6 breiter bzw. höher dargestellt werden. Das kann für Fließtext sinnvoll sein, für das generelle Layout einer Seite sind diese fehlerhaft dargestellten Eigenschaften Gründe dafür, dass ein Layout auf einmal gesprengt wird.     

Beispiel HTML-Code

<body>
   <div id="box1">
      <div id="box2">
          <div id="box3">
          </div>
      </div>
   </div>
</body>

Beispiel CSS-Code 

body {
   background-color : #DEDEDE;
   background-image: url('raster.gif');
   margin : 0px;
   padding : 0px;
}
#box1 {
   width: 200px;
   height: 150px;
   border : 2px solid red;
   margin : 20px;
   padding : 20px;
}
#box2 {
   border : 2px solid blue;
   margin : 2em;
   padding : 2em;
   width: 100%;
   height: 12em;
}
#box3 {
   background-color : #DEFF00;
   border : 2px solid red;
   width: 100%;
   height: 100px;
   margin : 2em;
   padding : 2em;
}

Screenshot Firefox

Korrekte Darstellung des Box-Models

Oben aufgeführter Quelltext wird im Firefox, aber auch im Safari, Google Chrome sowie im IE ab Version 7 so dargestellt.

Screenshot Internet Explorer 6

Abweichende Darstellung im Internet Explorer 6

Darstellung des gleichen Quelltextes im Internet Explorer 6. Der Unterschied ist signifikant!    

Zukunft des Internet Explorer 6

Anders als der Netscape 7, der auf einmal nicht mehr in den Statistiken auftauchte, wird der Internet Explorer 6 noch eine ganze Weile zu berücksichtigen sein. Auch wenn derweil auch große Firmen beginnen, den IE6 nicht mehr zu unterstützen, liegen Zugriffe in Statistiken immer noch um die 10%, was eine nicht zu ignorierende Marktanteilgröße ist.   

Dilemma ist jedoch, dass auf der anderen Seite viele große Firmen ausschließlich den Internet Explorer 6 "aus Sicherheitsaspekten" als Browser für Ihre Mitarbeiter zur Verfügung stellen. Ob das sinnvoll ist, sei dahin gestellt, aber das ist der wesentliche Grund, dass der IE6 so schnell nicht verschwinden wird! 

Weiterführende Links

© 2008-2010 - Stephan Heller -  

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 || Ich hab' heute facebook frei... || Foto Studio Köln || Barrierefreier kostenloser Webcounter