Il existe de nombreux excellents articles à l’étranger dont vous pouvez tirer des leçons, j’ai donc décidé de passer du temps à les traduire. Je ne sais pas si quelqu'un a traduit cet article. Le nom original est 10 Awful IE Bugs and Fixes . J'espère que davantage de personnes pourront lire ces excellents articles. Les étrangers sont très humoristiques, alors j'ai lu tout le texte. Les experts font un détour
Voici la traduction :
J'ai répertorié 10 bogues courants d'IE et leurs solutions. Je pense que cela vous aidera à réduire le temps que vous passez à déboguer les incohérences de mise en page dans IE.
Auteur : Kévin
Introduction
Chacun a sa propre histoire lorsqu'il s'agit de gérer IE. En tant que développeur, je dois faire face à de nombreuses bizarreries d'IE et parfois vous avez juste envie de vous cogner la tête contre le mur. Mais au fil du temps, nous avons beaucoup appris (parfois ce n'était pas de notre faute, c'était la faute d'IE !) et avons commencé à accepter et à comprendre le comportement étrange d'IE. Nous devons le faire car il existe encore un nombre important d'utilisateurs d'IE6. La meilleure chose à faire est de tester constamment votre site Web à partir de différents navigateurs dès le début. Il est beaucoup plus facile de résoudre les problèmes de mise en page dès le début qu'après des milliers de lignes de code HTML et CSS.
Il existe de nombreux mouvements de protestation contre IE6, soutenus par une majorité d'experts du Web et d'utilisateurs ordinaires qui ne semblent pas s'en soucier beaucoup. Alors, que pouvons-nous faire maintenant ? Nous avons dû continuer à creuser pour résoudre le problème avec IE6. Mais attendez, il y a des nouvelles passionnantes. D'après le rapport mensuel de w3cschool, le nombre d'utilisateurs d'IE6 a diminué au fil des ans. De 60,3% en juin 2006 à 13,6% en septembre 2009. Selon ce ratio, nous devrions pouvoir abandonner IE6 d'ici fin 2010 (Annotation : La situation à l'étranger est vraiment bonne~.~)
Bon, revenons à la réalité, j'ai dressé une liste de tous les problèmes que j'ai rencontrés auparavant pour référence future. Je pense que cela vous aidera à réduire le temps que vous passez à déboguer les incohérences de mise en page dans IE.
1. Texte fantôme IE6 (bug de texte fantôme)
Avant d'écrire cet article, j'ai rencontré ce bug. C'est assez bizarre et drôle. Un morceau de texte en double provenant de nulle part est affiché à proximité du texte original par IE6. (Annotation : vous pouvez également vous référer au bug des personnages en double d'Explorer 6 pour une démonstration de bug). Je n'ai pas pu le réparer, alors je l'ai recherché, et bien sûr, c'est un autre bug d'IE6.
Il existe de nombreuses solutions de contournement pour cela, mais aucune d'entre elles n'a fonctionné pour mon exemple (je n'ai pas pu en utiliser certaines en raison de la complexité du site). J'ai donc utilisé un hack. L'ajout d'espaces après le texte original semble résoudre le problème.
Cependant, j'ai appris sur Hippy Tech Blog que la raison du problème est due aux balises de commentaires HTML. IE6 ne peut pas le restituer correctement. Voici une liste de ses solutions suggérées :
Solution :
2. Position relative et débordement masqué
J'ai rencontré ce problème à plusieurs reprises lorsque je préparais un tutoriel sur JQuery car j'utilisais beaucoup de débordement caché pour réaliser la mise en page que je souhaitais.
Le problème se produit lorsque le débordement de l'élément parent est défini sur masqué et que l'élément enfant est défini sur position:relative.
CSS-Trick propose un excellent exemple illustrant ce bug. position : relative et débordement dans Internet Explorer
Solution :
Ajouter position:relative; à l'élément parent ;
3. Hauteur minimale pour IE
C'est simple, IE ignore l'attribut min-height. Vous pouvez utiliser le hack ci-dessous pour résoudre ce problème. Merci à Dustin Diaz .
Cette solution fonctionne bien dans IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2.
Solution :
sélecteur {
hauteur minimale : 500 px ;
hauteur:auto !important;
hauteur : 500 px ;
}