Compilation de conseils de compatibilité CSS pour les navigateurs IE et Firefox

Auteur：Eve Cole Date de mise à jour：2025-01-02 18:00:01

Conseils courants sur la compatibilité CSS

Veuillez essayer d'écrire du code au format xhtml, et DOCTYPE affecte le traitement CSS. En tant que norme W3C, une instruction DOCTYPE doit être ajoutée.

1.Problème de centrage vertical de div

vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble du DIV line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que vous devez contrôler le contenu et ne pas l'envelopper dans une autre ligne.

2. Le problème du doublement de la marge

La marge définie pour un div défini sur float sera doublée sous IE. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline; à l'intérieur de ce div.

Par exemple:

<#div id=»imfloat»>
Le CSS correspondant est #imfloat{
flotteur : gauche ;
margin:5px;/*Sous IE, cela signifie 10px*/
display:inline;/*Sous IE, il sera compris comme 5px*/}

3. Double distance générée par le flottement, c'est-à-dire

#box{ float:left; width:100px; margin:0 0 0 100px; //Dans ce cas, IE générera une distance de 200px display:inline;

Parlons en détail des deux éléments block et inline : la caractéristique de l'élément block est qu'il commence toujours sur une nouvelle ligne, et la hauteur, la largeur, la hauteur de la ligne et les marges peuvent toutes être contrôlées (élément block la caractéristique) ; de l'élément en ligne est celui-là, et les autres éléments sont sur la même ligne et ne peuvent pas être contrôlés (éléments en ligne) ;

#box{ display:block; //Peut simuler des éléments en ligne en tant qu'éléments de bloc display:inline; //Obtenir l'effet d'une disposition dans la même ligne diplay:table;

4 problèmes IE avec la largeur et la hauteur

IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il existait un min. C'est un gros problème. Si vous utilisez uniquement la largeur et la hauteur, ces deux valeurs ne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, la largeur et la hauteur ne sont pas définies du tout. sous IE.

Par exemple, si vous souhaitez définir une image de fond, cette largeur est plus importante. Pour résoudre ce problème, vous pouvez faire ceci :

#box{ largeur : 80 px ; hauteur : 35 px ;}html>corps #box{ largeur : auto ; hauteur : auto ; largeur minimale : 80 px ; hauteur min : 35 px ;}

5. Largeur minimale de la page

min-width est une commande CSS très pratique. Elle peut spécifier que la largeur minimale d'un élément ne peut pas être inférieure à une certaine largeur, afin que la disposition soit toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin de rendre cette commande également disponible sur IE, vous pouvez placer un <div> sous la balise <body>, puis spécifier une classe pour le div, puis concevoir le CSS comme ceci :

#container{ min-width : 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise du javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.

6. Le texte IE flottant DIV produit un bug de 3 pixels

L'objet de gauche flotte et celui de droite est positionné en utilisant la marge gauche du patch extérieur. Le texte à l'intérieur de l'objet de droite sera espacé de 3 pixels par rapport à la gauche.

#box{ float:gauche; largeur:800px;}
#gauche{ float:gauche; largeur:50%;}
#droit{largeur:50%;}
*html #left{ margin-right:-3px; //Cette phrase est la clé}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7. Problème de cache-cache dans IE

Lorsque l'application div est complexe, il y a des liens dans chaque colonne et des problèmes de cache-cache peuvent facilement survenir dans les DIV.

Certains contenus ne peuvent pas être affichés. Lorsque la souris sélectionne cette zone, on constate que le contenu est bien sur la page. Solution : utilisez l'attribut line-height pour #layout ou utilisez une hauteur et une largeur fixes pour #layout. Gardez la structure de la page aussi simple que possible.

8. La division flottante est fermée ; hauteur flottante claire ;

①Par exemple : ＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >Le NOTfloatC ici ne veut pas continuer à traduire, mais veut être disposé vers le bas. . (Les propriétés de floatA et floatB ont été définies sur float:left;)

Ce code fonctionne bien dans IE, le problème vient de FF. La raison est que NOTfloatC n'est pas une étiquette flottante et que l'étiquette flottante doit être fermée. Ajoutez <#div class=”clear”> entre <#div class=”floatB”> <#div class=”NOTfloatC”> Ce div doit faire attention à sa position, et doit avoir l'attribut float avec le. 2 Il ne peut pas y avoir de relation imbriquée entre les divs au même niveau, sinon une exception se produira. Et définissez le style clair comme suit : .clear{ clear:both;}

② Ne définissez pas la hauteur du div comme wrapper externe. Afin de permettre à la hauteur de s'adapter automatiquement, ajoutez overflow:hidden dans le wrapper ; lorsqu'il contient une boîte flottante, l'adaptation automatique de la hauteur n'est pas valide sous IE. temps, IE doit être déclenché. L'attribut privé de mise en page (le maléfique IE !) peut être effectué en utilisant zoom:1 ;, obtenant ainsi la compatibilité.
Par exemple, un wrapper est défini comme suit :

.colwrapper{ débordement : caché ; zoom : 1 ; marge : 5px auto ;}

③Pour la composition, la description CSS que nous utilisons le plus est probablement float:left. Parfois, nous devons créer un arrière-plan unifié derrière le div float dans la colonne n, par exemple :

Par exemple, nous souhaitons définir l'arrière-plan de la page sur bleu afin que la couleur d'arrière-plan des trois colonnes soit bleue. Cependant, nous constaterons que lorsque le centre gauche s'étend vers le bas, la page conserve en fait la même hauteur. La raison est que la page n'est pas un attribut float et que notre page ne peut pas être définie pour flotter car elle doit être centrée, nous devrions donc le résoudre comme ceci.

La solution est d'intégrer un float left DIV d'une largeur de 100%.

④Fermeture flottante universelle (très important !)

Pour le principe du clear float, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel]. Ajoutez le code suivant au Global CSS et ajoutez class="clearfix" au div qui doit être fermé à chaque fois.

/* Supprimer le correctif */
.clearfix:after { content:"."; display:block height:0;
.clearfix { display: bloc en ligne }
/* Masquer depuis IE Mac */
.clearfix {affichage: bloc;}
/* Fin du masquage depuis IE Mac */
/* fin du clearfix */

Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc}

9. La hauteur ne peut pas être ajustée

La hauteur non adaptative signifie que la hauteur externe ne peut pas s'ajuster automatiquement lorsque la hauteur de l'objet interne change, en particulier lorsque l'objet interne utilise margin ou paddign.

exemple:

#box {couleur de fond :#eee ;
#box p {marge-haut : 20px ; marge-bas : 20px ;
<div id="box">
<p>Contenu de l'objet p</p>
</div>

Solution : ajoutez deux objets div vides au-dessus et en dessous de l'objet P : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border au DIV.

10.Pourquoi y a-t-il des espaces sous les images sous IE6 ?

Il existe de nombreuses techniques pour résoudre ce BUG. Vous pouvez modifier la présentation du code HTML, ou définir l'img sur display:block ou définir l'attribut vertical-align sur vertical-align:top.

le texte en bas, au milieu et en bas peut être résolu.

11. Comment aligner le texte avec la zone de saisie de texte

Ajoutez vertical-align:middle;

12.Y a-t-il une différence entre l'identifiant et la classe définis dans les standards du Web ?

(1). Les standards Web n'autorisent pas les identifiants répétés. Par exemple, div id="aa" ne peut pas être répété deux fois, et la classe définit une classe en théorie, elle peut être répétée à l'infini, de sorte que les définitions qui en nécessitent plusieurs. des références peuvent être utilisées.

(2).Problème prioritaire des attributs

L'ID a une priorité plus élevée que la classe, voir l'exemple ci-dessus

(3). C'est pratique pour les scripts clients tels que JS. Si vous souhaitez effectuer des opérations de script sur un objet dans la page, vous pouvez définir un identifiant pour celui-ci. Sinon, vous ne pouvez le trouver qu'en parcourant les éléments de la page et en spécifiant. des attributs spécifiques. C'est une perte de temps et de ressources, mais beaucoup moins simple qu'une pièce d'identité.

13. Conseils pour afficher le contenu dans LI avec des points de suspension après avoir dépassé la longueur

Cette technique est applicable aux navigateurs IE et OP

-->
</style>

14. Pourquoi IE ne peut-il pas définir la couleur de la barre de défilement conformément aux normes du Web ?

La solution est de remplacer le corps par du HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

＜/style>

15. Pourquoi ne puis-je pas définir un conteneur d'une hauteur d'environ 1 px ?

Ce problème sous IE6 est dû à la hauteur de ligne par défaut et il existe de nombreuses techniques de résolution, telles que :
débordement : zoom caché : 0,08 hauteur de ligne : 1 px

16. Comment faire afficher le calque sur Flash ?

La solution est de définir la transparence pour FLASH

17. Comment centrer verticalement un calque dans le navigateur

Ici, nous utilisons le positionnement absolu en pourcentage et la technique consistant à utiliser des valeurs négatives en dehors du patch. La taille de la valeur négative est sa propre largeur et sa hauteur divisées par deux.

Conseils de compatibilité CSS pour Firefox et IE

1. Problème de centrage Div

Le div est déjà centré lorsque margin-left et margin-right sont définis sur auto. Cela ne fonctionne pas avec IE. Il faut d'abord définir text-algin: center dans l'élément parent ; le contenu de l'élément parent est centré.

2. La bordure et le fond du lien (une balise)

Pour ajouter une bordure et une couleur d'arrière-plan à un lien, vous devez définir display: block et float: left pour garantir l'absence de saut de ligne. En ce qui concerne la barre de menus, définir la hauteur d'une barre de menus permet d'éviter la dislocation de l'affichage du bord inférieur. Si la hauteur n'est pas définie, un espace peut être inséré dans la barre de menus.

3. Le problème selon lequel le style de survol n'apparaît pas après l'accès au lien hypertexte

Le style de lien hypertexte qui a été cliqué et visité n'est plus actif et de nombreuses personnes ont dû rencontrer ce problème. La solution est de changer l'ordre des attributs CSS : LVHA.

Code:

4. Curseur du doigt du curseur

curseur : le pointeur peut afficher la forme du doigt du curseur dans IE FF en même temps, la main ne peut être affichée que dans IE

Remplissage et marge de 5.UL

La balise ul a une valeur de remplissage par défaut dans FF, mais dans IE, seule margin a une valeur par défaut, donc définir d'abord ul{margin:0;padding:0;} peut résoudre la plupart des problèmes.

6. Balise FORMULAIRE

Cette étiquette aura automatiquement des marges dans IE, tandis que dans FF, la marge est de 0. Par conséquent, si vous souhaitez l'afficher de manière cohérente, il est préférable de spécifier la marge et le remplissage en CSS. Pour résoudre les deux problèmes ci-dessus, mon CSS en général. , le style ul, form{margin:0;padding:0;} est défini en premier, vous n'aurez donc pas de mal de tête plus tard.

7. Problème d'incohérence dans l'explication du modèle BOX

L'interprétation du modèle BOX dans FF et IE est incohérente, ce qui entraîne une différence de 2 pixels. Conseils pour la solution : div{margin:30px!important;margin:28px;} Notez que l'ordre des deux marges ne doit pas être inversé. attribut important, mais les navigateurs ne peuvent pas le reconnaître. Donc, sous IE, cela est en fait interprété comme ceci :

Si div{maring:30px;margin:28px} est défini à plusieurs reprises, le dernier sera exécuté, vous ne pouvez donc pas simplement écrire margin:xx px!important;#box{ width:600px; //for ie6.0- w; identifiant:500px ; //pour ff+ie6.0}
#box{ width:600px!important //pour ff width:600px; //pour ff+ie6.0 width /**/:500px //pour ie6.0-}

8. Sélecteur d'attribut (cela ne peut pas être considéré comme compatible, c'est un bug de masquage du CSS)

p[id]{}div[id]{}

Ceci est masqué pour IE6.0 et les versions inférieures à IE6.0 et fonctionne dans FF et Opera. Il existe toujours une différence entre les sélecteurs d'attribut et les sous-sélecteurs. La portée des sous-sélecteurs est réduite dans la forme, tandis que la portée de l'attribut. les sélecteurs sont relativement grands, comme p[id], toutes les balises p avec id sont du même style.

9.Les moyens les plus impitoyables - !important

S'il n'y a vraiment aucun moyen de résoudre certains problèmes détaillés, vous pouvez utiliser cette technique. FF analysera automatiquement "! Important" en premier, mais IE l'ignorera comme suit.

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important /*Style pour FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* Style pour IE */};

Il est à noter que la phrase xxxx !important doit être placée au-dessus d'une autre phrase.

10. Problème de valeur par défaut d'IE et FF

Peut-être vous êtes-vous plaint de la raison pour laquelle vous devez écrire des CSS différents spécifiquement pour IE et FF, pourquoi IE est un tel casse-tête, et ensuite vous maudissez ce foutu M$ en écrivant du CSS. IE. En fait, en termes de prise en charge des normes CSS, IE n'est pas aussi mauvais que nous le pensions. La clé est que les valeurs par défaut d'IE et de FF sont différentes, et vous constaterez que l'écriture de CSS. qui est compatible avec FF et IE n'est pas si difficile, peut-être pour du simple CSS, vous n'avez pas du tout besoin de la chose "! Important".

Nous savons tous que lorsqu'un navigateur affiche une page Web, il décidera comment l'afficher en fonction de la feuille de style CSS de la page Web, mais nous ne décrirons pas nécessairement tous les éléments en détail dans la feuille de style, et bien sûr là Il n'est pas nécessaire de le faire. Ainsi, pour les propriétés qui ne sont pas décrites, le navigateur utilisera la valeur par défaut intégrée. façon d'afficher, comme le texte, si vous ne spécifiez pas la couleur en CSS, le navigateur utilisera le noir ou la couleur système pour afficher, l'arrière-plan du div ou d'autres éléments, s'il n'est pas spécifié en CSS, le navigateur le définira Est blanc ou transparent, et les autres styles non définis sont les mêmes. Par conséquent, la raison fondamentale pour laquelle beaucoup de choses sont affichées différemment entre FF et IE est que leurs affichages par défaut sont différents. Quant à la façon dont ce style par défaut doit être affiché, je sais s'il existe des normes correspondantes dans w3 pour le stipuler, donc il n'y en a pas. besoin de commenter ce point.

11. Pourquoi le texte dans FF ne peut-il pas augmenter la hauteur du conteneur ?

Les conteneurs avec des valeurs de hauteur fixes dans les navigateurs standards ne seront pas étirés comme dans IE6. Donc, si je veux avoir une hauteur fixe et être étiré, quels paramètres dois-je effectuer ? La solution est de supprimer la hauteur et de définir ici min-height:200px, afin de prendre en charge IE6 qui ne connaît pas la hauteur min, elle peut être définie comme ceci :

{
hauteur:auto!important;
hauteur : 200 px ;
hauteur min : 200 px ;
}

12.Comment faire en sorte que les champs longs continus soient automatiquement renvoyés dans FireFox

Comme nous le savons tous, dans IE, vous pouvez utiliser directement Word-wrap:break-word. Dans FF, nous utilisons la technique d'insertion JS pour résoudre le problème.

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>

13. Pourquoi la largeur du conteneur sous IE6 est-elle différente de celle dans FF ?

La différence dans le problème est de savoir si la largeur totale du conteneur inclut la largeur de la bordure. Ici, IE6 l'interprète comme 200PX, tandis que FF l'interprète comme 220PX. Alors, quelle est exactement la cause du problème ? Si vous supprimez le fichier XML en haut du conteneur, vous constaterez que le problème d'origine réside ici. L'instruction en haut déclenche le mode Qurks d'IE.

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
<div ōnclick="alert(this.offsetWidth)">Rendre FireFox compatible avec IE</div>

Il existe de nouveaux problèmes avec la prise en charge de CSS par IE7.0, qui sont résolus comme suit.

Le premier type, CSS HACK

Bpx; /*Pour IE7 et IE6*/
_hauteur:20px; /*Pour IE6*/

Faites attention à la commande.

Ce qui suit est également un CSS HACK, mais ce n'est pas aussi simple que ci-dessus.

#exemple { couleur : #333 } /* Moz */
* html #exemple { couleur : #666 } /* IE6 */
*+html #exemple { couleur : #999 } /* IE7 */

La seconde consiste à utiliser des commentaires conditionnels spécifiques à IE.

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

La troisième méthode est la méthode de filtrage CSS. Ce qui suit est traduit de sites Web étrangers.

Créez un nouveau style CSS comme suit :

#article {
largeur : 200 px ;
hauteur : 200px ;
fond : rouge ;
}

Créez un nouveau div et utilisez le style CSS défini précédemment :

<div id="item">quelque texte ici</div>

Ajoutez l'attribut lang ici dans la performance corporelle, le chinois est zh :

Définissez maintenant un autre style pour l'élément div :

*:lang(fr) #item{
arrière-plan:vert !important;
}

Ceci est fait pour écraser le style CSS d'origine avec !important. Étant donné que le sélecteur :lang n'est pas pris en charge par IE7.0, il n'aura aucun effet sur cette phrase. Par conséquent, le même effet sous IE6.0 est obtenu, mais il. est très difficile. Malheureusement, Safari ne prend pas non plus en charge cet attribut, vous devez donc ajouter le style CSS suivant :

#article :vide {
fond : vert !important
}

Le sélecteur :empty est une spécification CSS3. Bien que Safari ne prenne pas en charge cette spécification, cet élément sera toujours sélectionné. Que cet élément existe ou non, le vert apparaîtra désormais sur les navigateurs autres que les versions IE.

Pour la compatibilité avec IE6 et FF, vous pouvez considérer le précédent !important. Personnellement, je préfère le premier, qui est simple et a une meilleure compatibilité.