Résoudre les problèmes CSS avec Internet Explorer

Les mises à jour du langage HTML et CSS se font chaque fois que le développement web se progresse, sans oublier que même les navigateurs se progressent aussi de leurs tours, donc il se mettent aussi à jours sinon ça ne sert à rien de faire la MAJ de HTML et du CSS.

Comme pour chaque mise à jour on rencontre généralement des nouveaux problèmes c’est la même chose dans notre sujet sauf que cette fois ci ça vient du navigateur et non pas du code HTML ou CSS, généralement avec les navigateurs les plus connus tel que Chrome, Safari, Firefox on ne rencontre pas de problème dans l’interprétation CSS, mais avec Internet Explorer il existe toujours un problème :/

Ne vous inquiétez pas ! Pour tout problème il existe forcement une solution, c’est dans notre cas, vous allez voir dans la suite une solution qui résout vos problèmes CSS avec le navigateur Internet Explorer 😉

Comment résoudre les problèmes CSS avec Internet Explorer (IE)

On remarque que la plupart des problèmes d’exécution CSS avec explorer c’est les marges et les blocs qui ne prennent pas la place qu’on indique, donc il faut appliquer un code spécial (ce qu’on appel un hack CSS) qui sera exécuté seulement sur Internet Explorer.

I) Pour maîtriser le processus, il y a deux manières de faire (deux astuces)

1)
Vous pouvez utiliser le moins (-) ceci fait l’inverse du cas normale ex :

Si vous avez appliqué margin-left :0px ; et votre div est décalé de la bordure gauche de 12 pixel vers la droite vous pouvez régler ce problème, ajoutez (-) ex :

margin-left :-12px ;


2)
Vous pouvez appliquer un code que sur un navigateur :

Internet exploreur : ajouter / devant le code ex :

/margin-left :-12px ;

Internet exploreur 6 : ajouter _ (tiret de 8 ) devant le code ex :

_margin-left :-12px ;

Firefox : ajoutez !important avant la fermeture du code ex :

margin-left :-12px !important ;

II) Comment résoudre le min-hight :

L’un des problèmes que nous avons eu lors de la réalisation de notre site c’est :

Nous avons créé un div de centre qui porte un texte, nous avons appliqué sur ce div un mini-hight :750px ; ,sur firefox tout marche bien mais sur internet exploreur nous avons eu un hight (hauteur) de 20px. Voici comment nous avons fait pour résoudre ce problème :

Min-hight : 750px ;
Height : auto !important ;
Hight : 750px ;

Personne ne sait pour quoi Microsoft ne veut pas trouver une solution finale pour ses problèmes avec le CSS -_-
Avant d’appliquer tout ce que vous avez appris sur ce tutoriel, merci de consulter les statistiques de votre site (Analytics ou autre) et de voir les visiteurs de votre site et les navigateurs qu’ils utilisent car généralement s’ils utilisent la dernière version tel que Internet Explorer 10 et 11 etc ils n’auront pas de problème d’affichage 😉

Les commentaires sont fermés.