Correction de bug: affichage des images

Voilà un bug de la maquette sous Internet Explorer que je n'arrivais pas à corriger. Et si des professionnels de la profession comme Raphael Götter ne trouvaient pas la solution, j'avais très peu de chances d'y arriver.

Le problème était le suivant: les images illustrant certains articles ou brèves sont placés dans un conteneur flottant droit (en termes plus clairs, le code CSS suivant permet de placer les images sur la droite du texte) :

dl.images {
    float: right;
    margin-left: 10px;
}

On peut discuter de la pertinence d'utiliser les listes de définition pour afficher le couple image + légende, mais là n'est pas le problème. Le bug, dû à la mauvaise gestion des flottants par Internet Explorer, interdisait l'affichage des images, même si le conteneur était convenablement placé. L'emplacement de l'image devenait juste une zone vide.

Après avoir farfouiller le web à la recherche d'une solution, j'ai décidé de sortir l'artillerie lourde. Et comme toujours dans ces cas là, le site Position Is Everything arrive à la rescousse. L'une des « solutions universelles » quand on cherche à corriger un bug d'Internet Explorer, c'est d'appliquer au conteneur qui pose problème la propriété position: relative. Ne me demandez pas pourquoi: les auteurs de cette découverte restent eux-mêmes dans l'expectative.

dl.images {
    position: relative;
    float: right;
    margin-left: 10px;
}

Et voilà les images qui réapparaissent comme par magie...

En savoir plus