eleqtriq

Jeder, der schon einmal versucht hat, den HR-Tag im Internet-Explorer kleiner als Version 8 via CSS zu stylen weiss, dass das praktisch unmöglich ist. Der IE nimmt nur eine kleine Menge von Attributen überhaupt an. Das folgende kleine Script, kann helfen dieses Problem zu umschiffen. Die Funktionsweise ist denkbar einfach: wir parsen unser HTML-Dokument mittels Javascript und ersetzen alle HR durch einen DIV. Im zugehörigen CSS werden alle Attribute für das HR auch für ein DIV mit derselben Klasse definiert:

Das Javascript

Dieser Code gehört in den Kopf unseres HTML-Dokumentes: <!--[if lte IE 8]> <script type='text/javascript'> function replaceHR(rulerNum){ var ruler=document.getElementsByTagName("hr")[rulerNum]; var documentFragment= document.createDocumentFragment(); var oldClassName=ruler.className; var replacementDiv= document.createElement("div"); replacementDiv.className=oldClassName+" "+"_div"; documentFragment.appendChild(replacementDiv); ruler.parentNode.replaceChild(documentFragment, ruler); } var l=document.getElementsByTagName("hr").length-1; for(var i=l; i>-1; i--){ replaceHR(i); } </script> <![endif]-->

(Achtet darauf, dass wir den Klassennamen für das DIV um die Endung "_div" erweitert haben. Das ist nicht nötig, kann uns aber in manchen Situationen später mal das Leben leichter machen). Das entsprechende Stylesheet sieht dann folgendermaßen aus: div.myfancyrulerclass_div, hr.myfancyrulerclass { background-image: url(somefancyimage); } That's it. IE-User ohne aktiviertes Javascript sehen den default-HR. Sollten die HR für diese User versteckt oder mit anderen Attributen versehen werden, nutzt Eure bevorzugten CSS-Filter.

Trackback

Kommentare sind geschlossen.