Share
Internet Explorer - le fléau de l'existence de la plupart des développeurs Web. Jusqu'à 60% de votre développement peut être perdu en essayant simplement d'éliminer des bogues spécifiques à IE, ce qui ne représente pas une utilisation productive de votre temps. Dans ce tutoriel, vous allez découvrir les bogues les plus courants liés à IE et les disparités de rendu, et comment les supprimer facilement ou les traiter..
En passant, si vous ne souhaitez pas suivre ce processus vous-même ou si vous rencontrez des problèmes pour résoudre un bogue IE particulier, essayez le service de correction des problèmes du navigateur IE dans Envato Studio..
Service de correction des problèmes du navigateur IE sur Envato Studio Alternativement, vous pouvez trouver cet article Envato Market utile: Détection de navigateur facile et rapide. Il vous permet de déterminer rapidement le navigateur utilisé et d’afficher des notifications ou d’entreprendre d’autres actions en fonction de ce navigateur..
Détection de navigateur facile et rapide Centrer un élément est probablement quelque chose que chaque développeur Web doit faire pour créer une mise en page. Le moyen le plus simple et le plus polyvalent de centrer un élément est d’ajouter marge: auto; à l'élément concerné. La méthode ci-dessus s’occupe de centrer l’élément indépendamment de la résolution et / ou de la largeur du navigateur. IE 6 en mode quirks décide toutefois de gérer cela de la manière la plus regrettable possible: en ne le gérant pas du tout.
Considérons le code suivant:
#container border: solid 1px # 000; arrière-plan: # 777; largeur: 400px; hauteur: 160px; marge: 30px 0 0 30px; #element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 100px; marge: auto 30px;
La sortie que vous attendez:
Mais ce que IE vous donne réellement:
Ceci est principalement dû à IE6 en mode quirks et en dessous ne reconnaissant pas le auto valeur que nous mettons à la marge propriété. Heureusement, cela est facilement résolu.
Le moyen le plus simple et le plus fiable de centrer le contenu pour IE6 et les versions antérieures consiste à appliquer text-align: center à l'élément parent et ensuite appliquer text-align: left à l'élément à centrer pour s'assurer que le texte qu'il contient est correctement aligné.
#container border: solid 1px # 000; arrière-plan: # 777; largeur: 400px; hauteur: 160px; marge: 30px 0 0 30px; text-align: center; #element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 100px; marge: 30px 0; text-align: left;
Presque tous les développeurs Web utilisent des listes pour créer leur navigation. Généralement, vous créez l'élément conteneur, créez des liens à l'intérieur, puis faites flotter les ancres dans la direction souhaitée et appelez-les un jour. Habituellement. IE décide cependant de le rendre beaucoup plus compliqué. Parcourez le code suivant:
ul list-style: none; ul li a display: block; largeur: 130px; hauteur: 30px; text-align: center; couleur: #fff; float: gauche; fond: # 95CFEF; bordure: solide 1px # 36F; marge: 30px 5px;
Un navigateur conforme aux normes le rend comme suit:
Et la capture d'écran IE:
Pas une navigation particulièrement agréable si vous me demandez. Heureusement, il existe 2 correctifs que vous pouvez essayer.
Le moyen le plus simple de lutter contre cela consiste à faire flotter les éléments li eux-mêmes au lieu des éléments ancres. Ajoutez simplement ceci et vous devriez avoir terminé.
ul li float: left;
La deuxième façon est d'appliquer affichage: en ligne à l'élément li englobant. En plus de la correction de ce bogue, il corrige également le bogue à double marge mentionné ci-dessous. Les puristes n’aimeront peut-être pas placer des blocs dans des éléments en ligne.
ul li display: inline
Ce bogue est probablement l’un des premiers problèmes rencontrés par un développeur Web débutant et est spécifique à Internet Explorer 6 et aux versions ultérieures. Le déclencher est aussi simple que de faire flotter un élément puis d’appliquer une marge dans la direction dans laquelle il a été flotté. Et le tour est joué! La marge sera doublée dans la sortie rendue. Ce n'est pas vraiment quelque chose que vous attendez avec impatience tout en créant une disposition parfaite en pixels.
Considérons ce code:
#element background: # 95CFEF; largeur: 300px; hauteur: 100px; float: gauche; marge: 30px 0 0 30px; bordure: solide 1px # 36F;
Sur les navigateurs conformes aux normes, voici à quoi cela ressemble:
Mais voici comment IE 6 décide de le rendre:
Le correctif pour ce bogue spécifique est d'appliquer affichage: en ligne à l'élément flottant et tout fonctionne comme il est censé. Notre code précédent change maintenant pour:
#element background: # 95CFEF; largeur: 300px; hauteur: 100px; float: gauche; marge: 30px 0 0 30px; bordure: solide 1px # 36F; affichage: en ligne;
Dans le cadre de la création d'une mise en page, vous devrez peut-être créer des éléments de très petite hauteur sous forme de bordures personnalisées pour les éléments. Habituellement, il vous suffit d'ajouter hauteur: XXpx aux déclarations du style et vous devriez avoir terminé. Ou alors vous avez pensé. Vérifiez la page dans IE et vous ferez probablement une double prise.
Par exemple, regardez le code suivant:
#element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 2px; marge: 30px 0;
Et le résultat est juste comme prévu: un élément 2 px avec une bordure 1 px.
Et dans IE:
La cause de ce bogue est assez simple: IE refuse simplement de dimensionner un élément plus petit que la taille de police définie. Définir simplement la taille de police à 0 vous permet d'avoir un élément aussi petit et court que vous le souhaitez.
#element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 2px; marge: 30px 0; taille de police: 0;
La prochaine meilleure façon de traiter ce bogue est d'appliquer débordement caché à l'élément de sorte qu'il s'effondre à la hauteur prévue.
#element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 2px; marge: 30px 0; débordement caché
Ce bogue tire la tête quand, dans une mise en page, vous définissez le conteneur du parent débordement propriété à auto et placez un article relativement positionné à l'intérieur. L'élément relativement positionné viole les limites de son élément parent et déborde à l'extérieur. Laisse moi démontrer. Regardez le code suivant:
#element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 150px; marge: 30px 0; débordement: auto; #anotherelement background: # 555; largeur: 150px; hauteur: 175px; position: relative; marge: 30px;
Et le résultat attendu:
Et la sortie d'IE:
Le moyen le plus simple de corriger ce bogue ennuyeux consiste simplement à positionner l'élément parent également.
#element background: # 95CFEF; bordure: solide 1px # 36F; largeur: 300px; hauteur: 150px; marge: 30px 0; débordement: auto; position: relative;
La mauvaise interprétation d'Internet Explorer du modèle de boîte est peut-être son erreur impardonnable. IE 6 en mode conforme aux normes semi-standards évite cela, mais ce problème peut toujours être déclenché par le mode quirks.
Deux éléments div. Un avec le correctif appliqué et un sans. La différence de largeur et de hauteur est la somme des rembourrages appliqués de chaque côté.
Je suis sûr que le dilemme avec le modèle de boîte n’a besoin ni d’explication ni de démonstration, je vais donc vous donner le correctif..
L'astuce consiste à définir la largeur normalement pour tous les navigateurs conformes aux normes, à cibler uniquement IE5 / 6, puis à lui donner la largeur corrigée. Voici comment vous allez habituellement parler:
#element width: 400px; hauteur: 150px; rembourrage: 50px;
Cela change maintenant pour:
#element width: 400px; hauteur: 150px; \ height: 250px; \ width: 500px
En gros, vous ajoutez le rembourrage à la largeur d'origine et le transmettez à IE 6. Le correctif cible IE 6 en mode quirks uniquement; vous n'avez donc pas à vous soucier de IE 6 en mode normal..
Il est impératif de définir une hauteur minimale pour un élément lorsque vous essayez de convertir un beau design en pixel parfait. Malheureusement, IE ignore complètement le hauteur min propriété à la place en prenant la hauteur déclarée comme hauteur minimale.
Le correctif est un hack créé par Dustin Diaz. Il utilise le !important déclaration pour le faire fonctionner. L'extrait ressemble à ceci:
#element min-height: 150px; hauteur: auto! important; hauteur: 150px;
La deuxième méthode consiste à tirer parti du fait qu'IE ne peut pas analyser les sélecteurs enfants..
#element min-height: 150px; hauteur: 150px; html> body #element height: auto;
L'un des concepts importants de la création de dispositions sans table à l'aide de CSS concerne les éléments flottants. Dans la plupart des cas, IE6 gère cela avec aplomb mais dans certains cas, il échoue. Lorsqu'il est confronté à un contenu indestructible ou à des éléments dont la largeur dépasse la largeur de son parent, il provoque des ravages dans les mises en page. Laisse moi te montrer.
Considérons ce morceau de code:
http://net.tutsplus.com/
#element, #anotherelement background: # 95CFEF; bordure: solide 1px # 36F; largeur: 100px; hauteur: 150px; marge: 30px; rembourrage: 10px; float: gauche; #container background: # C2DFEF; bordure: solide 1px # 36F; largeur: 365px; marge: 30px; rembourrage: 5px; débordement: auto;
La sortie attendue telle que visualisée sur un navigateur conforme aux normes:
Dans IE:
Comme vous pouvez le constater, la première division s’agrandit pour s’adapter au contenu, ce qui brise finalement la mise en page..
Il n'y a pas de solution élégante pour ce bogue. La seule façon de sauvegarder la mise en page est d'appliquer débordement caché à l'élément, mais au prix de couper le contenu incassable. La mise en page sera enregistrée, mais le contenu supplémentaire ne sera pas.
#element background: # C2DFEF; bordure: solide 1px # 36F; largeur: 365px; marge: 30px; rembourrage: 5px; débordement caché;
IE 6 ajoute un espacement vertical, même si aucun cas n'est spécifié. Regardons d'abord le code.
ul marge: 0; rembourrage: 0; style de liste: aucun; li a background: # 95CFEF; bloc de visualisation;
A quoi ça devrait ressembler:
Qu'est-ce que IE nous donne:
Heureusement, il existe une pléthore de corrections que vous pouvez essayer.
La solution la plus simple consiste à définir une largeur pour les balises d'ancrage et le tour est joué! tout rend comme il se doit. La déclaration d'une largeur déclenche la spécificité IE de l'élément hasLayout propriété. Vous pouvez plutôt définir une hauteur si vous voulez.
li a background: # 95CFEF; bloc de visualisation; largeur: 200px;
La méthode suivante consiste à faire flotter l'ancre à gauche puis à la nettoyer.
li a background: # 95CFEF; float: gauche; clair: gauche;
La troisième méthode consiste à ajouter affichage: en ligne à la clôture li élément. Cela corrige également le bogue de double marge comme indiqué ci-dessus.
li display: inline;
Et voilà: les neuf bogues de rendu les plus courants dans IE, et comment les écraser. Espérons que cela vous a sauvé du sang, de la sueur et des larmes lors du débogage de votre prochaine création. Je vais regarder la section commentaires fréquemment; alors carillon ici si vous rencontrez des difficultés pour mettre en œuvre les correctifs indiqués ici.
Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!
Si vous en avez assez de tirer les cheveux à cause de bogues déroutants, consultez Envato Studio où vous pouvez demander de l'aide à des développeurs triés sur le volet qui aiment effacer les bogues et apporter des corrections.!
Accentsconagua