IE6 CSS bugs die je altijd zullen achtervolgen
Geschreven door Leander Snijders woensdag, 20 januari 2010 20:38
Internet Explorer 6 heeft de beste CSS-ondersteuning die een browser biedt...9 jaar geleden.
De 'kleine' bugs in de CSS-ondersteuning achtervolgen menigeen webdesigner nog elke dag. Er zijn nog steeds mensen die technieken verwerpen die niet werken in Internet Explorer 6, wij bij VisionEars wijgeren momenteel echter toe te geven aan de beperkingen die deze zwaar verouderde versie van Internet Explorer heeft.
De volgende bugs zullen je steeds achtervolgen:
De "Box model bug":
Dit is misschien wel de meest voorkomende en frustrerende van alle bugs in IE 6 en lager. We verklaren de bug als volgt:
div # box ( width: 100px; border: 2px solid black; padding: 10px; )
IE 6 berekent de breedte van het vak á 100px. Moderne browsers berekenen de breedte van het vak á 124px.
Dit soort discrepantie kan grote layout problemen veroorzaken. Je zou zeggen dat IE het hier bij het rechte eind heeft maar dit is niet zoals de specificaties beschreven zijn.
Dit probleem is over het algemeen te omzeilen door geen padding te gebruiken op je "containers" of hoe je ze ook wilt noemen. Als je bijvoorbeeld padding wilt geven en je gebruikt <p> elementen om je tekst dan kun je hier de padding opgeven. Een workaround, maar het werkt...
De Dubbele Margin Bug
Met behulp van het box voorbeeld van hierboven, laten we stellen dat we deze willen laten "floaten"naar rechts:
div # box ( float: right; margin-right: 20px; )
IE 6 zal de 20px verdubbelen naar 40px. Nogmaals, iets wat enorme layout problemen kan geven. De algemene workaround is om "display:inline" toe te voegen aan de div. Waarom deze "oplossing" zo vaak is toegepast is niet duidelijk maar dat het niet praktisch is dat is zeker.
Probeer deze bug zoveel mogelijk te omzeilen. Als het echt nodig is om het vak weg te duwen van de rechterkant van het parent element, dan kun je dat waarschijnlijk beter doen door padding aan het parrent element te geven.
Geen minimale breedtes en minimale hoogtes
Het instellen van min-width en min-height op elementen is zo'n natuurlijke en logische zaak dat het je kan verscheuren als je weet dat je er niet op kan rekenen omdat IE6 ze volkomen negeert! Min-height is ongelooflijk nuttig voor bijvoorbeeld een footer. Stel dat deze minimaal 100px hoog moet zijn omdat je een achtergrond afbeelding gebruikt naar beneden maar je wilt geen statische hoogte instellen omdat je het achtergrondeffect wilt laten "meegroeien" als er meer text in de footer aanwezig komt. Min-height is hier de perfecte oplossing voor maar IE6 doet er niets mee. Maar een bizarre eigenschap van IE6 is dat het de height property gebruikt zoals min-height bedoeld is! Je kunt dit een "hack" noemen maar dat is het eigenlijk niet omdat height natuurlijk een normale CSS eigenschap is maar "je moet het maar weten".
Stepdown
Normaal kun je vaak niet op "floating" objecten rekenen wat betreft verticale uitlijning... in IE6. IE6 heeft de eigenschap om floating objecten die na elkaar zijn geplaatst een stuk naar beneden te duwen wat het stepdown effect veroorzaakt. Het lijkt op een een trap naar beneden! De oplossing hiervoor is om te zorgen dat de line-height van het bovenliggende (parent) element is ingesteld op 0 of het floating type in te stellen op inline.
Geen Hover Staat
De meeste moderne browsers ondersteunen hover states op zowat elk element, maar IE6 niet. IE6 ondersteund alleen de hover pseudo-class op anker (<a>) elementen, en zelfs dan krijg je ze niet als je anker geen href attribuut heeft. De oplossing hiervoor lijkt alleen hover te gebruiken op <a> elementen!
Geen Alpha transparante PNG-ondersteuning
Een vreselijk gemis aan IE6 is de ondersteuning van het PNG-formaat, en wel de ondersteuning van de 24-bits PNG's. Er zijn diverse "oplossingen" voor dit probleem maar we mogen wel stellen dat het zwaar triest is dat dit bestandsformaat in deze browser bij transparantie "grijze bras" vertoond.
Wil je toch je IE6 gebruikende bezoekers in de watten leggen, gebruik dan de volgende fix die volgens ons momenteel het beste werkt: DD_belatedPNG
Dus...
Al deze bugs zijn wel op te lossen of via workarounds weg te werken maar je zult ze alleen maar kunnen omzeilen door al je test werk goed uit te voeren. Onze algemene filosofie is: ontwerp met de meest moderne technieken die voor handen liggen maar zorg dat ze wel werken met de oudere. Maarrr, er zijn natuurlijk grenzen en daarom bieden wij standaard geen ondersteuning meer voor IE 6!
De beste oplossing voor de vreemde IE trekjes zijn nog het beste te verhelpen met conditionele stylesheets. Meer hierover later!
UPDATE:
Lees meer: Hoe werken conditional comments.
