Weg met Internet Explorer - deel 2: de italicbug
Permalink · Geplaatst op 9 September 2005 om 12:44
Een maand of tien geleden schreef ik in mijn bedrage "Weg met Internet Explorer! Firefox to the people!" over redenen waarom je op een moderne en regelmatig bijgehouden browser zou moeten stappen. Dat was wellicht een wat eenzijdig belichte bijdrage, maar de kern ervan blijft nog steeds overeind voor mij. Internet Explorer heeft een achterhaalde renderengine die vol met bugs zit, ofwel ten aanzien waarvan bewust ongelukkige keuzes zijn gemaakt. De afgelopen dagen heb ik wat foto's gepost die ik recentelijk met mijn 10D gemaakt heb. Deze foto's zijn 600 pixels breed; voor minder doe ik het niet, dan kun je echt niets meer zien. Juist met het oog daarop had ik al maanden terug een nieuwe stylesheet gemaakt met een contentsectie die 600 pixels breed is. Ideaal... tot je daadwerkelijk foto's van die breedte gaat posten en dan in Internet Explorer met de oude stylesheet dezelfde pagina bekijkt.
In de oude (blauw-grijze) style heeft het contentvak een breedte van 535 pixels. Wel staat er op die div een overflow: visible maar guess what? Dat wordt niet correct gerenderd door IE4 tot en met IE6. Dat heeft dan normaal gesproken slechts tot gevolg dat dat hele blok wordt opgerekt (in dit geval in de breedte) totdat het plaatje er wel inpast... terwijl het plaatje in een echte browser keurig over de rand uit zou moeten steken (er over flowen ja). Ik zeg 'normaal gesproken', want bij mij was de kous daarmee niet af.
In den beginne...
Bij de allereerste pixelprecieze layout op hjdeboer.nl liep ik tegen de beruchte italicbug van Internet Explorer aan: heb je een contentdiv met een vaste breedte, met tekst erin die je zowel italic maakt als horizontaal tweezijdig uitlijnt, dan wordt je hele div een paar pixels naar rechts opgerekt om de schuinte van de letters erin te laten passen.
Geen punt. 't Is Internet Explorer, daar zijn we dat van gewend. Ik kwam aan de oplossing door een topic op GoT te openen. Het gebruiken van de hack van 'Position is everything' zorgde ervoor dat het vak in alle versies vanaf IE5 wél de juiste breedte hield bij italic tekst:CSS:
1 | /* \*/
|
Wat bleek nu gisteren? De gehele inhoud van div#content werd ongeveer 500 pixels naar beneden gegooid (waardoor er een grote lege ruimte bovenaan ontstond), zodra er maar één plaatje ergens in die div breder was dan de maximum breedte van de div. Ik had dus niet alleen een contentvak dat naar rechts werd uitgerekt, maar bovendien verschoof mijn hele content een stuk naar beneden. Hoe een te groot plaatje zo'n schade aan je complete layout toe kan brengen... Nu heb ik een tijd geleden geroepen dat ik Internet Explorer niet meer zou ondersteunen, maar eigenlijk is het mijn eer te na en ik vind het nog wel mooi gepruts ook om het tóch voor elkaar te krijgen. Het gedrag van het uitrekken naar rechts vanwege een foute interpretatie van overflow: visible heb ik geprobeerd op te lossen met het inladen van de voortreffelijke set javascripts van Dean Edwards, onder de naam IE7. Dat werkte ten dele, omdat er (waar hij al voor waarschuwt) een ding opgelost wordt, maar nog meer vernaggeld wordt. Dat dus weer weggegooid.
Uiteindelijk bleek dat het gedeelte w\idth: auto;, dat nodig is om de italicbug op te lossen in versies lager dan IE6, de verschuivende content veroorzaakte als de content écht te breed was voor zijn parent-element. Echter, haalde ik alleen dat stukje weg, dan kreeg ik toch ook in IE6 weer last van die bug. Uiteindelijk heb ik een bijzonder goede oplossing gevonden op een weblog, waar uitgelegd werd hoe je met één simpel regeltje CSS de italicbug kon oplossen in IE6, zonder de overbodige regels voor de lagere versies nodig te hebben. Ik heb dat voor de zekerheid geprobeerd en het werkte meer dan prima! Deze hack moet toegepast worden op het parent-element van de contentdiv zelf:
CSS:
1 | * html #right_column {
|
In één klap was het probleem van de naar beneden opschuivende content verdwenen, terwijl ik ondertussen niet opnieuw last kreeg van de italicbug. Nu zat ik nog met één probleem: het meerekken van het contentvak met het formaat van de foto's. Dat gebeurde natuurlijk niet in de nieuwe style, want daar is het contentvak even breed als de foto's (600 pixels), maar wel in de oude. De oplossing heb ik gevonden in het schaamteloos aangepast implementeren van het image rescale-script van GoT. Het was mijn enige oplossing. De te brede foto's worden nu gewoon naar de juiste breedte van 535 pixels geresized met hulp van javascript.
Al met al betekent het dat ik nu lekker foto's op 600 pixels breedte kan posten, zonder me te bekommeren om hoe dat er in de oude stylesheet uitkomt. Dat gaat nu automatisch bij elke foto goed. Echter, ik ben er in browsercompatibiliteit wel zover op achteruit gegaan, dat de oudere versies van Internet Explorer waarschijnlijk nu wel weer de italicbug laten zien. Toch een beetje "weg met Internet Explorer dus".
Uiteindelijk is het gewoon het beste wanneer iedereen Firefox zou gebruiken. Tenzij Microsoft daadwerkelijk werk gaat maken van een degelijke ondersteuning van CSS en de oude renderbugs oplost in de nieuwe versie, Internet Explorer 7.