Eén van mijn grote frustraties is Internet Explorer. Als webdeveloper kom ik regelmatig in contact met de vele bugs in dit vier jaar oude programma. Een klein voorbeeldje volgt hier:

Het doel is om een horizontale blauwe lijn (een hr-tag) van 1 pixel hoog m.b.v. CSS, welke in alle hedendaagse browsers werkt.

Een real-life voorbeeld zoals gemaakt door een ontwikkelaar die enkel met IE werkt: style="height: 1px; color: blue;"

---

In IE krijgen we een blauwe lijn van 1 pixel hoog. Merk op dat we niets over de "border" hebben gezegd. Toch is deze plotseling verdwenen in IE.
In Opera/Mozilla wordt het correct gerenderd: de content van de HR is 1 pixel hoog, met daaromheen de standaard border. Merk op dat er helemaal niets blauw is, "color: blue" wordt gebruikt als voorgrondkleur, maar er is helemaal geen voorgrond! Twee fouten in IE. Hoewel de meningen daarover verschillen. Maar interpretatie van IE vind ik ronduit onlogisch.

W3C compliant: style="height: 1px; border: 0px; background-color: blue;"

---

In Opera en Mozilla wordt deze lijn correct gerenderd. In IE gaat het mis, blijkbaar zijn daar de voorgrond- en achtergrondkleur omgedraaid; we vertellen niets over de voorgrondkleur, derhalve laat IE de lijn grijs.

W3C compliant, met IE-fix. Omdat IE de kleuren heeft omgedraaid, moet zowel de voorgrond- als achtergrondkleur worden opgegeven. Dus style="height: 1px; border: 0px; background-color: blue; color: blue;"

---

Nu hebben we het gewenste effect in IE, Mozilla en Opera en waarschijnlijk alle andere W3C-compliant browsers.

Helaas houdt het hier zo'n beetje op. De incompetentie van IE6 slaat weer toe. Zo blijkt het niet mogelijk te zijn om bijv. een background image te gebruiken zonder een border in IE. Pas als je een color opgeeft laat IE de border achterwege. Maar dan 'overschijf' je meteen weer de background image.

Een work-around is om een div'je rond de hr te plaatsen, de hr onzichtbaar maken en de div te stijlen naar believen. Op die manier behoud je de functie van de hr voor de structuur maar kun je toch van de gewenste opmaak voorzien.

Voorbeeld:
<div style="background: red; height 3px;">
  <hr style="display: none;" />
</div>

Internet Explorer heeft in dit geval minder problemen met W3C-compliant code dan W3C-compliant browsers met IE code.

Wees in elk geval verstandig, houd hoe dan ook de W3C-richtlijnen in acht. Laat de hr niet zomaar achterwege vanwege de gebrekkige support van IE6. De structuur van site is ook van belang, ook al zie je die niet direct. Het hr-element geeft een scheiding aan tussen stukken tekst. Voor de accessibility en mogelijk ook voor de zoekmachines is dat een bruikbaar hulpmiddel. De bezoekers van de site zullen je er uiteindellijk dankbaar voor zijn. En de kans dat je site ook door de komende generatie browsers goed weergegeven wordt is aanzienlijk groter.