Il existe souvent de nombreux problèmes d'incompatibilité entre IE et FF dans la mise en page des pages Web CSS. Voici quelques possibilités courantes et leurs solutions !
1. Utilisez !important pour résoudre les différences de mise en page entre IE et Mozilla !important est une syntaxe définie en CSS1. Sa fonction est d'augmenter la priorité d'application des règles de style spécifiées. Le point le plus important est qu'IE n'a jamais pris en charge cette syntaxe, mais d'autres navigateurs le font. Par conséquent, nous pouvons l'utiliser pour définir différents styles pour IE et d'autres navigateurs. Par exemple, nous définissons un style comme celui-ci :
Exemple de code source
[www.downcodes.com] .colortest{
bordure:20pxsolid#60A179!important;
bordure : 20pxsolid#00F ;
remplissage : 30 px ;
largeur : 300 px ;
}
Lors de la navigation dans Mozilla, il peut comprendre la priorité de !important, donc la couleur #60A179 est affichée ; lors de la navigation dans IE, il ne peut pas comprendre la priorité de !important, donc la couleur #00F est affichée.
2. Résolvez le problème selon lequel le style de survol ne s'affiche pas après l'accès au lien hypertexte. Changer l'ordre des propriétés CSS : La norme d'ordre doit être :
a:lien—a:visité—a:survol—a:actif
3. Comment afficher le contenu en Li avec des ellipses après avoir dépassé la longueur Exemple de code source
[www.downcodes.com] margin:3px - signifie que tous les côtés font 3px ;
margin:3px 5px - signifie que la valeur du haut et du bas est de 3px et que la valeur de droite et de gauche est de 5px
margin:3px 5px 7px —— indique que la valeur du haut est 3, la valeur de la droite et de la gauche est 5 et la valeur du bas est 7
margin : 3px 5px 7px 5px - les quatre valeurs représentent le haut, la droite, le bas, la gauche, le haut, la droite, le bas et la gauche ;
5. Résolvez le problème selon lequel IE ne peut pas afficher correctement le PNG transparent - ajoutez du code dans l'en-tête Exemple de code source
[www.downcodes.com]
fonction correctPNG()
{
pour(var i=0; i {
var img = document.images[i]
var imgName = img.src.toUpperCase()
si (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.titre) ? "titre='" + img.titre + "' " : "titre='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "gauche") imgStyle = "float:left;"
if (img.align == "right") imgStyle = "float:right;"
si (img.parentElement.href) imgStyle = "curseur: main;" + imgStyle
var strNewHTML = " + " style="" + "largeur :" + img.width + "px; hauteur :" + img.hauteur + "px;" + imgStyle + ";"
+ "filtre :progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
je = je-1
}
}
}
window.attachEvent("onload", correctPNG);
Utiliser (padding:0; margin:0; list-style:inside;)
Ou (padding:0; margin:0; list-style:none;) pour assurer la compatibilité
7. Solution à la différence de 2 pixels dans l'interprétation du modèle BOX dans Firefox et IE Exemple de code source
[www.downcodes.com] div{
marge:30px!important;
marge : 28 px ;
}
A noter que l'ordre de ces deux marges ne doit pas être inversé. Selon ce qui précède, IE ne prend pas en charge !important, il est donc en fait interprété comme ceci sous IE :
Exemple de code source
[www.downcodes.com] div{
mariage : 30 px ;
marge: 28px
}
S'il y a des définitions répétées, la dernière sera exécutée, vous ne pouvez donc pas simplement écrire margin:XXpx!important;
8. Effet de défaut de la marge Le contenu du div est centré par défaut dans IE et aligné à gauche dans FF par défaut. La façon de centrer le contenu ff est d'ajouter le code margin:auto;
