Bug sur Internet Explorer sur les attributs width et height de img

Bug sur Internet Explorer sur les attributs width et height de img (le 24 mai 2013)

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 ? :)

2 commentaires

Posté par Etienne le 24/05/2013 à 12:20:06
Il m'est arrivé le même problème il y a moins d'une semaine, sur une page d'inscription que j'avais créé (avec un simple formulaire et les logos partenaires) il manquait 2 logos car ceux ci avait un width et height (ou bien une je ne sais pas) vide. Bon quand j'ai vu que sur 5 images, seulement deux ne s'affichaient pas, j'ai vite compris en regardant le code. J'ai trouvé ça vraiment dommage :/
Posté par Erwan le 26/08/2013 à 12:48:32
Il y a un autre bug problématique. Si votre image a en css width et height en auto, peu importe les valeurs de vos attributs width et height, l'image s'affichera avec ses valeurs d'origine.
Ce bug est problématique quand on n'a pas la main sur le CSS. Wordpress propose par exemple de modifier l'affichage de l'image en modifiant les valeurs des attributs width et height mais le css bloque sous IE...

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.