Déboguer CSS
Déboguer la page pour Internet Explorer

La page qui nous sert d'exemple a été trouvée sur un forum, l'auteur voulait se débarrasser de l'espace sous deux images avec Internet Explorer.

Elle utilise un HTML valide ainsi que du CSS valide ce qui va nous permettre de déboguer.

Elle a été réduite à sa plus simple expression, les images ont été changées et elle et se présente sous deux formes :

Aucun problème avec Firefox, Opera ou Safari et nous pouvons passer à Internet Explorer.

Les copies d'écran ci-dessous donnent un aperçu des différences entre les navigateurs.

Effectuer les corrections pour Internet Explorer

L'espace

Le problème se situe dans #logo encadré en bleu par le DOM inspector dans la copie d'écran ci dessous.

étape 1

Cette fois-ci nous avons deux images et appliquer display:block; à l'image est inutilisable. Nous allons utiliser vertical-align:bottom; pour les deux images.
Sur la copie d'écran, c'est fait pour la première :

étape 2

On ajoute donc #logo a img{vertical-align:bottom;} dans les styles et le problème est réglé.

Affichage final avec IE :

affichage final