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.
Anyone who ever tried to style horizontal rulers in Internet Explorer knows that this is nearly impossible: IE<8.0 only accepts a small subset of CSS-Rules for styling HRs. This small script can help to solve this little problem. The functionality is straightforward: define all the attributes for your HR for a DIV of the same class. Parse through the HTML and replace every HR with a div of the same class-name:
The Javascript
This code belongs into the head of our HTML:
<!--[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]-->
(Just in case we added "_div" to the end of the classname. This is only optional but can be helpful in some situations). The stylesheet will look like this:
div.myfancyrulerclass_div,
hr.myfancyrulerclass {
background-image: url(somefancyimage);
}
That's it. IE-users with Javascript disabled will see an unstyled HR. If you want to hide HRs for this users or change some css-attributes, use your favorite css-filters.