IE 5.0x le maudit
Aujourd’hui, je me suis appliqué à peaufiner ma feuille de style, et notamment améliorer la lisibilité du rendu sous IE 5.0x (si ça n’avait pas été une question de lisibilité, je n’aurais pas levé le petit doigt). Après avoir effectué quelques tests, je me suis rendu compte de plusieurs choses :
Le sélecteur d’enfant
Quand IE 5.0x rencontre une ligne type
div#foo > div#bar, ce crétin fait comme si tout ce qui se trouvait avant le chevron n’existe pas.
Prenons en exemple ce passage de ma feuille de style :
div#menus li.menu:hover > ul {
display: block;
position: absolute;
margin-left: 135px;
}Je vous laisse imaginer de quelle façon toutes les listes non ordonnées se barrent en sucette dans tous les sens.
Le sélecteur d’attribut
Même principe, il ignore le sélecteur d’attribut et continue comme s’il n’existait pas. Encore un passage de ma feuille de style :
*[title] { border-bottom: 1px dotted black; }Résultat, tous les éléments de la page se voient affublés d’une bordure noire sur leur bord inférieur. Évidemment, ces problèmes se reproduisent pour d’autres parties de ma feuille de style où je pensais contrecarrer IE en douceur avec ces sélecteurs. Attention, ne vous méprenez pas sur mes intentions, je ne cherche pas à améliorer le design de la page sous ces navigateurs périmés (IE 6.0 compris), j’essaie juste d’améliorer la lisibilité du texte (parce qu’une liste dont le contenu dégueule sur le texte en dessous, c’est pas l’idéal).
J’ai réalisé quelques impressions d’écran pour les curieux parce que c’est quand même assez impressionnant, en particulier la troisième impression d’écran :)
Je viens de remarquer qu’en faisant div#foo>div#bar { ... } au lieu de faire div#foo > div#bar { ... } (que je trouvais plus clair pourtant…), IE n’interprète plus ce qu’il y a derrière le chevron, ouf…