Les problèmes de compatibilité IE6 doivent être pris en compte dans la disposition des pages Web

Le chiffre suivant montre le taux de visualisation du navigateur dans les détails des visiteurs dans le système de statistiques du site Web, et IE6 représente plus de 40%. Bien qu'il existe de nombreux types de navigateurs, IE seul possède de nombreuses versions telles que IE5.5, IE6, IE7, IE8, etc. Parmi ces nombreuses versions haut de gamme, IE6 est toujours aimée par la plupart des utilisateurs, donc lors de la saisie, IE6 n'est pas considéré comme le problème de compatibilité de IE6, sinon il perdra de nombreux visiteurs.

Voici 10 problèmes auxquels doivent être prêts attention dans IE6:

Vous devez ajouter le type doctype en haut de la page HTML. Bien sûr, la version stricte mérite d'être recommandée, par exemple:

<! Doctype html public - // w3c // dtd html 4.01 // en

http://www.w3.org/tr/html4/strict.dtd>

Ou, page xhtml! Doctype:

<! Doctype html public - // w3c // dtd xhtml 1.0 strict // en

http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

La dernière chose que vous voulez voir, c'est que IE6 entre en mode Quirk - il y a en fait suffisamment de bizarreries.

Position de réglage: Relative résout plus d'un problème, en particulier lors de la définition de l'alignement. De toute évidence, une chose que vous devez comprendre est que le positionnement absolu est relativement parlant. Peut-être, parce que vous n'avez pas de configuration, et vous ne savez pas que tout a volé là-bas. Par exemple, si vous concevez chaque article, il y a une image avant elle, et enfin, vous constatez qu'il n'y a qu'une seule image sur la page, peut-être qu'ils se chevauchent.

Cela provient du célèbre bug à double marge IE6. Par exemple, si vous concevez des flottants pour une div et définissez la marge-gauche: 5px;, il sera probablement la marge-gauche: 10px dans IE6. Ici, définissez l'affichage: en ligne pour les éléments flottants pour résoudre le problème.

De nombreux problèmes IE6 (ou IE7) peuvent être résolus en définissant la valeur Haslayout. (Si vous ne savez pas ce qui est en train, veuillez voir ici)

La façon la plus simple de définir une valeur Haslayout pour un élément est d'ajouter la hauteur ou la largeur de CSS (bien sûr, le zoom peut également être utilisé, mais cela ne fait pas partie de CSS). La définition d'une valeur spécifique est recommandée, mais parfois cela ne signifie pas nécessairement que la hauteur est. Ici, vous pouvez utiliser la hauteur: 1%. Si l'élément parent ne définit pas la hauteur, la hauteur physique de l'élément ne changera pas, mais elle a déjà la propriété Haslayout.

Une disposition complexe peut faire apparaître des éléments flottants à l'intérieur des éléments flottants sous la position flottante de nettoyage. C'est un problème étrange, et les éléments suivants peuvent vous aider à le résoudre:

• Assurez-vous que l'affichage: en ligne est défini sur l'élément flottant;

• Utiliser la marge droite: -3px dans les éléments flottants;

• Ajoutez un commentaire IE après le dernier élément de l'élément flottant, par exemple: <! - [si! Ie]> Laissez votre commentaire ici ... <! [Endif] ->

• Ajoutez une div au dernier élément (il s'agit de régler la largeur à 90% ou une autre hauteur similaire)

MISE À JOUR: Le moyen le plus simple est de supprimer tous les commentaires. (Grâce à Tian Wei'er pour son conseil, je ne l'ai pas rencontré moi-même, mais après l'avoir googlé, j'ai trouvé que cette méthode peut également être résolue, et c'est une méthode recommandée.)

Vous pouvez consulter plus d'explications à ce sujet dans positioniseverything.net.

6. Utiliser uniquement le survol dans la balise <a>, IE6 ne prend en charge que la balise <a> pour afficher le style de volant

Bien sûr, vous pouvez toujours résoudre cette méthode via JS. Cependant, il s'agit d'accessibilité. Il est recommandé de ne pas définir un contenu important dans le plan de survol implémenté à l'aide de JS.

Par exemple, Min-Height peut éviter d'utiliser CSS pour obtenir la compatibilité avec IE.

#élément {

Min-Height: 20EM;

Hauteur: Auto! IMPORTANT;

Hauteur: 20EM; / * Laissez IE6 afficher cette hauteur * /

}

IE6 ne peut pas identifier correctement la hauteur min. Vous pouvez définir une hauteur fixe pour permettre à IE6 de résoudre à 20EM. Même ainsi, il changera sa hauteur en raison de la taille du contenu. Une autre façon consiste à utiliser des sélecteurs avancés:

#élément {

Min-Height: 20EM;

Hauteur: 20EM;

}

/ * Ignorer ie6 * /

#Element [id] {

Hauteur: Auto;

}

L'échelle confondre IE6, sauf si vous ajoutez une hauteur exacte à l'élément parent. Sinon, ajoutez! Important aux autres, par exemple:

corps{

Marge: 2% 0! IMPORTANT;

marge: 20px 0; / * Ie6 lisible * /

}

N'oubliez pas de tester tôt et de tester fréquemment à moins que votre niveau ne soit terminé. Sinon, vous pouvez passer plus de temps à résoudre les problèmes IE6. D'une manière générale, si votre site Web peut bien fonctionner sous IE6 et Firefox, on estime que d'autres navigateurs n'auront aucun problème majeur.

Dans de nombreux cas, la résolution d'un problème peut prendre plus de temps que la refactorisation de votre code.