Kurz nachdem ich den Verweis auf den Artikel über die CSS-Unterschiede in den verschiedenen Internet Explorer Versionen publiziert hatte habe ich den Artikel bei heise online entdeckt, der auf die Dokumentation von Microsoft verweist. Diese dokumentiert unter anderem auch die verschiedenen Erweiterungen gegenüber den Standards bei CSS, JavaScript und DOM. Es empfiehlt sich, die PDF-Version der Artikel zu lesen, da in der HTML-Version jedes Unterkapitel auf einer einzelnen Seite dargestellt wird.
Mit ‘CSS’ getaggte Artikel
Internet Explorer Standard Support Dokumentation
Sonntag, 04. April 2010CSS Unterschiede der Internet Explorer Versionen 8, 7 und 6
Sonntag, 28. März 2010Der Internet Explorer 9 steht zwar schon in den Startlöchern, aber die älteren Versionen 6 und 7 werden immer noch benutzt. So haben auf meiner Webseite die alten Versionen immer noch einen Anteil von 27% (IE7) bzw. 15% (IE6) aller Internet Explorer Zugriffe (Marktanteil auf meiner Seite: 16%; alle Angaben gemessen seit Anfang 2010).
Bei Smashing Magazine habe ich eine gute Übersicht der Unterschiede der letzten drei Internet Explorer Versionen gefunden (in Englisch). Diese Übersicht hat mir auch bei der Erstellung des ‘Bildbeschreibung über Bild anzeigen’-Effektes sehr geholfen.
Update zu ‘Bildbeschreibung über Bild anzeigen’
Montag, 15. Februar 2010Der Code im Artikel Bildbeschreibung über Bild anzeigen hat noch zwei Probleme bei älteren Versionen des Internet Explorers:
Internet Explorer 7:
Beim Internet Explorer 7 kann es passieren, dass der Block mit dem Text neben oder verschoben auf dem Bild angezeigt wird. Dadurch wird der Textblock teilweise durch nachfolgende Elemente verdeckt. Durch die explizite Positionsangabe und dem Wechsel von der Variante des Versteckens mittels display-Style zum visibility-Style konnte ich diese Probleme beheben:
div.switch div.mouse
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}
Internet Explorer 6:
Hier ist das Problem schwerwiegender. Der Internet Explorer 6 unterstützt keine Unterselektoren nach einem Pseudo-Element. Somit funktioniert das entscheidende Style Sheet nicht. Als Workaround zeige ich den Text im Internet Explorer 6 als ToolTip an. Der JavaScript-Code und die Styles können der aktualiserten Datei entnommen werden.
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif
