problèmes de compatibilité HTML courants

1. Les images PNG24 bits apparaissent en arrière-plan sur le navigateur iE6

Solution : créez-le en PNG8 ou vous pouvez vous référer à un script pour le traitement.

2. La marge et le remplissage par défaut des navigateurs sont différents

Solution : ajoutez un *{margin:0;padding:0;} global pour unifier.

3. Bogue de double marge IE6 : sous IE6, si un élément flotte et que margin-left ou margin-right est défini en même temps, la valeur de la marge sera doublée.

1

#box{ float:leftwidth:10pxmargin:0 0 0 10px;} 

Dans ce cas, IE générera une distance de 20px

Solution : Ajoutez _display:inline; au contrôle de style d'étiquette flottant pour le convertir en attribut en ligne. (_ Ce symbole n'est reconnu que par ie6)

4. La méthode d'identification progressive exclut progressivement les parties du tout. 

Premièrement, l'utilisation intelligente de la marque "\9" sépare le navigateur IE de toutes les situations. 

Ensuite, utilisez à nouveau "+" pour séparer IE8 de IE7 et IE6, afin que IE8 soit reconnu indépendamment.

1

2

3

4

5

6

.bb{

    background-color:#f1ee18/*所有识别*/

    .background-color:#00deff\9/*IE6、7、8识别*/

    +background-color:#a200ff/*IE6、7识别*/

    _background-color:#1e0bd1/*IE6识别*/ 

5. Sous IE, vous pouvez utiliser la méthode d'obtention d'attributs normaux pour obtenir des attributs personnalisés, ou vous pouvez utiliser getAttribute() pour obtenir des attributs personnalisés ; sous Firefox, vous ne pouvez utiliser que getAttribute() pour obtenir des attributs personnalisés.

Solution : obtenir uniformément des attributs personnalisés via getAttribute()

6. Sous IE, l'objet événement a les attributs x et y, mais pas d'attributs pageX et pageY ; sous Firefox, l'objet événement a les attributs pageX et pageY, mais pas d'attributs x et y.

Solution : (Commentaire conditionnel) L'inconvénient est que des requêtes HTTP supplémentaires peuvent être ajoutées sous le navigateur IE.

7. Par défaut, l'interface chinoise de Chrome forcera l'affichage du texte de moins de 12 px en 12 px.

Solution : ce problème peut être résolu en ajoutant l'attribut CSS -webkit-text-size-adjust : none ;

8. Une fois le lien hypertexte visité, le style de survol n'apparaîtra plus. Le style de lien hypertexte sur lequel vous avez cliqué et visité n'a plus de survol et n'est plus actif.

Solution : Changer l'ordre de tri des propriétés CSS LVHA

1

2

3

4

a:link {}

a:visited {}

a:hover {}

a:active {}

9. Problème de mode étrange : si l'instruction DTD est omise, Firefox analysera toujours la page Web selon le mode standard, mais le mode étrange sera déclenché dans IE. Pour éviter que des modèles étranges ne nous causent des problèmes inutiles, il est préférable de développer une bonne habitude d'écrire des déclarations DTD. Vous pouvez désormais utiliser [html5](http://www.w3.org/TR/html5/single-page.html) Méthode d'écriture recommandée : <!DOCTYPE html>

10. Le problème du chevauchement des marges supérieure et inférieure : ie et ff existent. Les marges gauche et droite de deux divs adjacents ne se chevaucheront pas, mais les marges supérieure et inférieure se chevaucheront.

Solution : Développez de bonnes habitudes de codage et utilisez margin-top ou margin-bottom en même temps.

11. IE6 ne prend pas bien en charge le format d’image png.

Solution : citer un script pour le traitement

Je suppose que tu aimes

Origine blog.csdn.net/smallmww/article/details/132331184
conseillé
Classement