Introduction aux problèmes de compatibilité multi-navigateurs et aux solutions utilisant CSS

Points de traitement de compatibilité
1. DOCTYPE affecte le traitement CSS

2 FF : après avoir défini le padding, le div augmentera la hauteur et . width, mais IE ne le fait pas, vous devez donc utiliser !important pour définir une hauteur et une largeur supplémentaires

3 : prend en charge !important, mais IE l'ignore. un style spécial pour FF

4. Le problème du centrage vertical de div : vertical-align:middle; l'intégralité du DIV line-height : 200px ; insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que le contenu doit être contrôlé sans sauts de ligne

5. Le modèle BOX dans Mozilla Firefox et IE a des interprétations incohérentes, ce qui entraîne une différence de 2 pixels Solution :
<.>div{
margin :30px!important;margin:28px;}
Notez que l'ordre de ces deux marges ne doit pas être inversé, !important cet
attribut IE ne peut pas le reconnaître, mais d'autres navigateurs peuvent être identifiés. Donc il est en fait interprété comme ceci sous IE :
div{maring:30px;margin:28px}

Si vous répétez la définition, elle sera exécutée selon la dernière, donc vous ne peut pas simplement écrire margin:XXpx!important ;

Différences de navigateur
1. Problèmes d'indentation dans les listes ul et ol

Lors de l'élimination de l'indentation des listes ul, ol et autres, le style doit être utilisé. être écrit comme :
list-style:none;margin:0px;padding:0px; L'attribut margin est valide pour IE et l'attribut padding est valide pour FireFox.

[Remarque] Il a été vérifié que dans IE, la définition de margin:0px peut supprimer les retraits supérieurs, inférieurs, gauche et droit, les espaces et les numéros ou points de la liste. La définition du remplissage n'a aucun effet sur. le style ; dans Firefox, la définition de margin :0px ne peut supprimer que les espaces supérieurs et inférieurs. La définition de padding :0px ne peut supprimer que les retraits gauche et droit. Vous devez également définir list-style :none pour supprimer les numéros ou les points de la liste. En d'autres termes, dans IE, seul margin:0px peut être défini pour obtenir l'effet final, tandis que dans Firefox, margin:0px, padding:0px et list-style:none doivent être définis en même temps pour obtenir l'effet final.

2. Problème de transparence CSS

IE : filter:progid:DXImageTrans
pourm.Microsoft.Alpha(style=0,opacity=60). FF：opacité:0,6.
[Note] Il est préférable d'écrire les deux et de mettre l'attribut d'opacité ci-dessous.

3. Problème de coins arrondis CSS

IE : Les versions inférieures à ie7 ne prennent pas en charge les coins arrondis.
FF : -moz-b
order-radius:4px, ou -moz-border-radius-topgauche:4px; border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;. [Note] Le problème des coins arrondis est un problème classique en CSS Il est recommandé d'utiliser l'ensemble
JQueryframework pour définir les coins arrondis, laissant ces problèmes complexes à d'autres. penser à. Cependant, les coins arrondis de jQuery ne prennent en charge que les coins arrondis de toute la zone et ne prennent pas en charge les coins arrondis de la bordure. Cependant, les coins arrondis de cette bordure peuvent être obtenus par des moyens simples, je les présenterai la prochaine fois.
4. curseur:main VS curseur:pointeur

Description du problème : Firefox ne prend pas en charge la main, mais IE prend en charge le pointeur, les deux sont des instructions manuelles.
Solution : utilisez le pointeur de manière uniforme.

5. Différentes définitions de la taille de police

La définition de la taille de police sm
all est différente. Elle est de 13 px dans Firefox et de 16 px dans IE. .
Solution : utilisez la taille de police spécifiée, par exemple 14 px.

Plusieurs éléments (
images ou liens) disposés côte à côte entre divs et divs, les espaces et retours chariot dans le code seront ignorés dans Firefox, mais sont affichés par défaut dans IE est l'espace (environ 3px).
6. Bordure CSS à double ligne
IE : border:2px out
set;. FF : -moz-border-top-colors : #d4d0c8 blanc ;-moz-border-left-colors : #d4d0c8 blanc ;-moz-border-right-colors :#404040 #808080 ;-moz-border- bottom-colors :#404040 #808080 ;

Bogue du navigateur
1. Bug de la double marge d'IE

.La marge définie pour un div défini sur float sous IE sera doublée. Il s'agit d'un bug qui existe dans ie6.

Solution : ajoutez display:inline;

à ce div. Par exemple :

🎜>
Le css correspondant est

Ce qui suit est le contenu cité par
:

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}

Il y a trop de problèmes en CSS, même le même CSS les définitions ont des effets d'affichage différents selon les normes de page. Une suggestion qui va dans le sens du développement est que la page soit écrite en utilisant les standards XHTML standards, avec moins d'utilisation de tableaux, et que les définitions CSS soient basées autant que possible sur le DOM standard, en tenant compte des navigateurs grand public tels que IE, Firefox et Opéra. Dans de nombreux cas, les standards d’interprétation CSS de FF et Opera sont plus proches des standards CSS et plus normatifs.

2. BUG de l'espace du sélecteur IE
Aujourd'hui, alors que je définissais le premier style de caractère pour le style de paragraphe de mon blog, j'ai découvert qu'un espace peut également invalider le style.

Veuillez regarder le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body>

Pour le monde, vous êtes une personne mais pour quelqu'un, vous êtes son monde tout entier. Même si vous êtes triste, ne froncez pas les sourcils, car vous ne savez pas qui tombera amoureux de votre sourire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!