Der IE 6, Hintergrundbilder und Hover

27.06.2007 Mal wieder ein Problem des Internet Explorer 6, welches in der Nachfolgeversion 7 behoben zu sein scheint: je nach Einstellung lädt der IE 6 Hintergrundbilder nicht aus dem Cache, sondern holt sie jedesmal neu vom Server. Negativ bemerkbar macht sich dies vor allem bei Hover-Effekten mit Hintergrundbildern. Beispiel:

<div id="foo"><a href="#"></a></div>

Das dazugehörige CSS ordnet den Selektoren a und a:hover verschiedene Hintergrund-Bilder zu:

#foo a {
display:block;
width:100px;
height:100px;
background-image:url(/images/foo.jpg)
}
#foo a:hover {
background-image:url(/images/bar.jpg)
}

Bei größeren Bildern kann es hierbei zu einem Flackern kommen, da der IE 6 foo.jpg verschwinden lässt, bevor bar.jpg vollständig geladen ist. Um dieses Flackern zu verhindern, ordne ich foo.jpg dem übergeordneten Element #foo zu. #foo a erhält stattdessen die Eigenschaft "background:transparent;"

#foo {
width:100px;
height:100px;
background-image:url(/images/foo.jpg)
}
#foo a {
display:block;
width:100px;
height:100px;
background:transparent;
}
#foo a:hover {
background-image:url(/images/bar.jpg)
}

Das Bild bar.jpg lädt dann gegebenenfalls immer noch etwas langsam, aber es stellt sich beim Bilderwechsel kein Flackern mehr ein.