Pas plus tard que ce matin, un client m'appelle pour me dire que des images ont disparu sur son site sous IE, alors qu'elles sont bien dans le code.
Tout de suite, premier réflexe : vérifier les problèmes générés par le HasLayout. Raté, ce n'est pas ça.
Second réflexe : penser que les images JPEG en question sont en CMYK (les vieux IE ont quelques soucis avec). Raté, pas ça non plus.
Pire, le problème apparait également sur IE10. Je cherche une solution CSS, rien. Au final, cela venait en fait du code HTML. Tout simplement, si vous mettez des attributs width
et/ou height
vide(s) sur la balise img
, IE ne les affichera pas (d'après ce que j'ai pu voir, IE10 réduit la valeur de l'attribut à 1 dans ce cas).
Plutôt qu'un long discours, un court exemple : j'ai listé 7 exemples de ce bug d'attributs vides sur cette page. Regardez la page sous Firefox, et observez-la sous IE : 5 cas ne fonctionnent pas sous IE.
- S'il n'y a aucun attribut, cela fonctionne.
- Si ces attributs sont remplis correctement, évidemment, cela fonctionne.
- Si un ou les attribut(s) est(sont) présent(s) mais vide(s), patatrac, l'affichage plante.
Autant être clair, je n'incrimine pas IE en particulier, c'est bien une erreur de code qui est juste bizarrement interprétée par ce navigateur.
En tout cas, nous sommes bien d'accord : cette situation ne devrait jamais arriver, la bonne pratique étant de spécifier ces attributs tout le temps. Toutefois… qui a dit que cette bizarrerie ne pourrait jamais arriver ? :)