Résumé de la façon de résoudre les problèmes de compatibilité du navigateur CSS

La compatibilité du CSS avec les navigateurs est parfois un casse-tête. Peut-être que lorsque vous comprendrez les techniques et les principes, vous constaterez que ce n'est pas difficile. Nous avons collecté des méthodes de compatibilité pour IE7, 6 et Fireofx sur Internet. J'ai réglé le problème. Pour la transition vers le web2.0, veuillez essayer d'écrire du code au format xhtml, et DOCTYPE affecte le traitement CSS

1.p problème de centrage vertical vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble p line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que le contenu doit être contrôlé pour ne pas s'enrouler

2. Le problème du doublement de la marge Si p est défini sur float, la marge définie sous IE sera doublée. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline; à ce p. Par exemple : 8a5cf3dcbde2cddfb719b2644eb32a80 Le CSS correspondant est #IamFloat{ float:left;/*sous IE, c'est entendu. comme 10px*/ display:inline;/*Sous IE, il sera compris comme 5px*/}

3 Double distance générée par IE flottant #box{ float:left width:100px margin:0; 0 0 100px; // Dans ce cas, IE générera une distance de 200px display:inline; //Ignorer les flottants} Parlons en détail des deux éléments block et inline : La caractéristique de l'élément block est qu'il commence toujours le une nouvelle ligne, la hauteur, la largeur, la hauteur de ligne et les marges peuvent être contrôlées (éléments de bloc) ; la caractéristique des éléments Inline est qu'ils sont sur la même ligne que les autres éléments et ne peuvent pas être contrôlés (éléments en ligne ); block; //peut être simulé pour les éléments en ligne Pour les éléments de bloc display:inline; //Obtenir l'effet de disposition dans la même ligne diplay:table

4 Problèmes avec IE et la largeur et la hauteur IE ne reconnaît pas la définition de min-, mais en fait elle combine la largeur et la hauteur normales et est utilisée comme s'il y avait min. Cela devient 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{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: 80px; 🎜>
5. La largeur minimale de la page min -width est une commande CSS très pratique. Elle peut spécifier que la largeur minimale de l'élément ne peut pas être inférieure à une certaine largeur, afin de garantir que la composition est toujours. correct. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Pour que cette commande fonctionne sur IE, vous pouvez placer un e388a4556c0f65e1904146cc1a846bee sous la balise 6c04bd5ca3fcae76e30b72ad730ca86d, puis spécifier une classe pour p, puis concevoir le CSS comme ceci : #container{ min-width : 600px; width :expression(document.body.clientWidth eebf2180bad10d36f692f96c85a52ea4 e749d076ae8f72fd7d46c434c5412e8494b3e26ee717c64999d7867364b1b4a3 /p>

7 Problème de cache-cache .IE Lorsque l'application p est complexe et qu'il y a des liens dans chaque colonne, le problème de cache-cache se produit facilement à ce moment-là. 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. Fermeture p du flotteur ; flotteur clair ; hauteur adaptative

① Par exemple : e874acc1d87dcc94f4e38d2310d52545e64e14ab9fdcdde24674fa52a0e41e8dLe NOTfloatC ici ne veut pas continuer à traduire, mais veut descendre. (Les attributs de floatA et floatB ont été définis sur float:left ;) Ce code n'a aucun problème dans IE, mais le problème réside dans FF. La raison en est que NOTfloatC n'est pas une étiquette flottante et que l'étiquette flottante doit être fermée. Ajoutez 0260e51744eea96cfa9057a0cbb56c10 entre 163393efcf02c2676818233c41eb2e65 76e3c42bfcaf55e241356211d1e51974. doit être cohérent avec les deux. Il ne peut pas y avoir de relation imbriquée entre p frères et sœurs avec des attributs float, sinon une exception se produira. Et définissez le style clair comme suit : .clear{ clear:both;}

② En tant que wrapper externe, ne définissez pas la hauteur de p. Afin de permettre à la hauteur de s'adapter automatiquement, ajoutez-la au fichier. wrapper. Allez dans overflow:hidden; Lorsqu'une boîte contenant float est incluse, l'adaptation automatique de la hauteur n'est pas valide sous IE. À ce moment, l'attribut privé de mise en page d'IE doit être déclenché (le maléfique IE !) Vous pouvez utiliser zoom:1. ; pour y parvenir. Par exemple, un wrapper est défini comme suit : .colwrapper{ overflow:hidden; zoom:1; margin: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 float p dans la colonne n, par exemple : 75598ae0912b4c03dd28a6ab100b9481 gauche">94b3e26ee717c64999d7867364b1b4a3 d8f860813499471c037538963a8b03c094b3e26ee717c64999d7867364b1b4a3 79e693531e16a21dc9354accf596237f94b3e26ee717c64999d7867364b1b4a3 l'arrière-plan de la page est bleu pour atteindre l'objectif d'avoir la couleur d'arrière-plan des trois colonnes bleue, mais nous constaterons que lorsque le centre gauche s'étend vers le bas, la page enregistre en fait la hauteur inchangée. Voici le problème. raison Le problème est que la page n'est pas un attribut flottant 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 ceci75598ae0912b4c03dd28a6ab100b9481 " style="float:left;width :100%”> 4b4ffd0ec90ac88eb2553cf173b6aaec94b3e26ee717c64999d7867364b1b4a3 ”right”>
④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 p qui doit être fermé à chaque fois. /* Clear Fix */ .clearfix:after { content:"."; display :block; clear:both; */ .clearfix {display:block;} /* Fin du masquage depuis IE Mac * / /* fin de clearfix */ Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet en tant que bloc au niveau de l'élément table}

11. Non-adaptation de la hauteur La non-adaptation de la hauteur se produit lorsque l'objet intérieur La hauteur extérieure ne peut pas être automatiquement ajustée lorsque la hauteur change, en particulier lorsque l'objet intérieur utilise une marge ou un paddign. Exemple : #box { } #box p {margin-top : 20px;margin-bottom: 20px; text-align:center; } 753396aab491b64ee4772d02f5086612 e388a4556c0f65e1904146cc1a846beepContenu dans l'objet< 94b3e26ee717c64999d7867364b1b4a3 Solution : Ajoutez 2 codes CSS d'objet p vides au-dessus et en dessous de l'objet P : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border à p.

12. Pourquoi y a-t-il un espace sous l'image sous IE6 ? Il existe de nombreuses façons de résoudre ce bug. Vous pouvez modifier la mise en page du code HTML, ou définir l'image pour afficher : bloquer ou définir la verticale. aligner l'attribut sur vertical-align:top | bottom |middle |text-bottom peut être résolu

13. Comment aligner le texte et la zone de saisie de texte avec vertical-align:middle; text/css"> 9545b5a134bd137942b1a858ba57fed9 531ac245ce3e4fe3d50054a55f265927

14 . Il existe une différence entre l'identifiant et la classe définis dans les normes Web. Quelle est la différence ? 1. La duplication des identifiants n'est pas autorisée dans les normes Web. Par exemple, pid="aa" ne peut pas être répété deux fois et la classe définit une classe. , qui peut théoriquement être répété à l'infini, donc les définitions qui nécessitent plusieurs références peuvent être utilisées. 2. La priorité des attributs est supérieure à celle de la classe. Voir l'exemple 3 ci-dessus. JS. Si vous souhaitez effectuer des opérations de script sur un objet dans la page, vous pouvez lui définir un identifiant, sinon vous ne pouvez le trouver qu'en parcourant les éléments de la page et en spécifiant des attributs spécifiques. ressources, et est beaucoup moins simple qu'un identifiant.

15. Une fois que le contenu de LI dépasse la longueur, utilisez une méthode d'affichage avec points de suspension. Cette méthode convient aux navigateurs IE et OP1411c4846efbbc88e47ddd0d90b9f82c eed7a45994b6d6d7637eeef7176c3039 pour centrer verticalement un calque dans le navigateur. Ici, nous utilisons le positionnement absolu en pourcentage et la méthode de correction des valeurs négatives. La taille de la valeur négative est sa propre largeur et sa hauteur divisées par deux

<!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">
 <!-- html { 
   scrollbar-face-color:#f6f6f6; 
   scrollbar-highlight-color:#fff; 
   scrollbar-shadow-color:#eeeeee; 
   scrollbar-3dlight-color:#eeeeee; 
   scrollbar-arrow-color:#000; 
   scrollbar-track-color:#fff; 
   scrollbar-darkshadow-color:#fff; } --> 
</style>

FF et IE.

1. Le problème de centrage p est déjà centré lorsque margin-left et margin-right sont définis sur auto. IE ne fonctionne pas. IE doit d'abord définir text-algin: center. ; dans l'élément parent. Cela signifie que le contenu de l'élément parent est centré.

2. La bordure et l'arrière-plan du lien (une balise). Pour ajouter une bordure et une couleur d'arrière-plan au lien, vous devez définir display: block et float: left pour garantir l'absence de sauts 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.

<style type="text/css"> 
<!-- p { 
    position:absolute; 
    top:50%; 
    lef:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
    border:1px solid red; 
   } --> 
</style>

3. Le problème selon lequel le style de survol n'apparaît pas après la visite du lien hypertexte. Le style de lien hypertexte qui est cliqué et visité n'a plus de survol et n'est plus actif. modifiez les propriétés CSS. Ordre de tri : L-V-H-A Code :

<style type="text/css"> 
  <!-- a:link {} a:visited {} a:hover {} a:active {} --> 
</style>

4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.

7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：p{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： p {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}p[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择 器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

10.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采 用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，p或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显 示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样 设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决 9a6c6593cd224a767d2b5172bc71b53a 62bd2fb5bf4db34fc65b81c061e0e4ce 531ac245ce3e4fe3d50054a55f265927 4df436957366b6ed1040126fa5a89c56aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa94b3e26ee717c64999d7867364b1b4a3 0d20824b412c474fd1dfb16e6b8dbc6d /* 820e02f229f4e29afaa637c15b28fe5dintLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ 283ead764fe6cb05d142a40edcf84695

13.Pourquoi la largeur du conteneur sous IE6 est-elle différente de celle de FF ?a92f311850ea20d3bcac3450ce6d7d4f 0137259d31f4115748f6af98e199bf5a 952d3f16c00ff73ed0ba309a7c7449f0 080b747a20f9163200dd0a7d304ba388 6cd0c9d441af65c4c6d52c4c88fdc979 ="alert(this.offsetWidth)">Rendre FireFox compatible avec IE94b3e26ee717c64999d7867364b1b4a3 La différence dans le problème est de savoir si la largeur de la bordure est incluse dans la largeur totale du conteneur. Ici, IE6 l'interprète comme 200PX et. FF est interprété comme 220PX, alors quelle est la cause exacte 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. Pour des informations pertinentes sur le mode qurks et le mode standards, veuillez vous référer à : http://. www.microsoft.com/china /msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

IE6, IE7, FF IE7.0 est sorti et il y a de nouveaux problèmes avec la prise en charge CSS . Il y a plus de navigateurs et la compatibilité des pages Web se dégrade. Nous avons toujours du mal à résoudre le problème de compatibilité d'IE7.0, j'ai trouvé l'article suivant : Maintenant, j'utilise surtout !important pour pirater, pour ie6 et. firefox Le test peut être affiché normalement, mais ie7 peut interpréter correctement !important, ce qui empêchera la page de s'afficher comme requis ! Ce qui suit est une collection de compatibilité de trois navigateurs.

Le premier est la méthode CSS HACK height:20px; /*For Firefox*/ *height:25px; 20px; /*Pour IE6*/ Faites attention à la commande. C'est aussi 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 */

1a7d18a31b837632352a79050bfceb3f 1325033f74410c73959088ed41585e69 944499813959732c0355bb419c52e016 ; be48b826fd3d3cff6bb36ca21bd23133 e42eef118e9746b78eaea3d8f2eb58e2 !--[si lte IE 6]> b2e08bf1deb247ac9659acbf2818c373link rel="stylesheet" type="text/css" href="ie.css" /> ; 1b771f47d72d900ba74308aee59557f0

La troisième méthode est la méthode du filtre CSS Ce qui suit est une traduction classique d'un site Web étranger. . Créez un nouveau style CSS comme suit : #item { width: 200px; height: 200px; background: red; } Créez un nouveau p et utilisez le style CSS défini précédemment : 8c6eab477ea811b2aef0ea66ce72bc0ddu texte ici<. ; /p> Ajoutez l'attribut lang ici dans l'expression du corps, le chinois est zh : af4276b4335489c3ca10bfad9c6fbf29 Définissez maintenant un autre style pour l'élément p : *:lang(en) #item{ background:green !important; } Ceci est fait pour écraser le style CSS d'origine avec !important Puisque 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. atteint, mais c'est très difficile. Malheureusement, Safari ne prend pas non plus en charge cet attribut, vous devez donc ajouter le style CSS suivant : #item:empty { background: green !important } : Le sélecteur vide est une spécification CSS3 bien que Safari. ne prend pas en charge cette spécification, il sera toujours utilisé. La sélection de cet élément, que cet élément existe ou non, sera désormais verte sur tous les navigateurs sauf IE. Pour la compatibilité avec IE6 et FF, vous pouvez considérer le précédent !important Personnellement, je préfère utiliser

.

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!