Analyse des causes d'incompatibilité du navigateur CSS

Cet article présente principalement l'analyse des raisons de l'incompatibilité du navigateur CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Incompatibilité du navigateur, tout le monde doit le faire. être profondément dégoûté. Souvent, nous nous contentons de résoudre le problème, mais oublions la chose la plus importante, qui est de rechercher la cause profonde et d'éviter que des incompatibilités similaires ne se reproduisent.

Je voudrais résumer quelques éléments de codage HTML, en espérant vous donner quelques indications :
1. La taille du texte lui-même est incompatible. Le même texte de style chanson avec font-size : 14px occupe un espace différent dans différents navigateurs. Sous IE, il occupe en réalité 16 px de hauteur et 3 px dans la marge inférieure. Dans FF, il occupe en réalité 17 px de hauteur, 1 px en haut et 1 px en haut. 1px en bas. Blanc 3px, ce sera encore différent sous Opera. Solution : définissez la hauteur de ligne du texte. Assurez-vous que tout le texte a une valeur de hauteur de ligne par défaut. C'est important, nous ne pouvons pas tolérer une différence de hauteur de 1 px.

2. La hauteur du conteneur est limitée sous ff. Autrement dit, une fois que le conteneur a défini la hauteur, la forme de la bordure du conteneur est déterminée et ne sera pas agrandie par le contenu. sera étendu par le contenu et la limite de hauteur sera invalide. Ne définissez donc pas facilement la hauteur du conteneur.

3. Nous avons également abordé le problème de la rupture du contenu du conteneur, horizontalement. Si le conteneur float n'a pas de largeur définie, le contenu sous ff étirera autant que possible la largeur du conteneur, et sous ie, la priorité sera donnée à l'habillage du contenu. Par conséquent, les conteneurs flottants dont le contenu peut éclater doivent définir une largeur.

Petite expérience : Si vous êtes intéressé, vous pouvez jeter un œil à cette expérience. Testez chacun des codes suivants dans différents navigateurs.

a.<p style=”border:1px solid red;height:10px”></p> b.<p style=”border:1px solid red;width:10px”></p>

c.<p style=”border:1px solid red;float:left”></p> d.<p style=”border:1px solid red;overflow:hidden”></p>

Le code ci-dessus est différent selon les navigateurs. L'expérience provient de l'utilisation d'une petite valeur de hauteur p, db236f8c565f22f133d76915115aa3f394b3e26ee717c64999d7867364b1b4a3, une petite valeur de hauteur doit être utilisée avec overflow:hidden. L'expérience est juste pour le plaisir. Ce que je tiens à souligner, c'est que les navigateurs ont des interprétations très différentes des limites des conteneurs et que l'impact du contenu des conteneurs varie.

4. Effacer les flotteurs Cela ne fonctionnera pas sans effacer les flotteurs sous ff.

Pour corriger l'incompréhension de tout le monde, il est faux de dire que ff est mauvais lorsqu'on rencontre une incompatibilité. En fait, c'est le plus souvent le comportement étrange de ie qui nous laisse perplexes. Ce qui suit répertorie les différents méfaits de ie6.

5. Le bug à double marge le plus détesté. Définissez margin-left ou margin-right pour un conteneur flottant sous IE6. L'effet réel est le double de la valeur. La solution consiste à définir display:inline pour le conteneur flottant.

6.mirrormargin bug, lorsqu'il y a un élément float dans l'élément externe, si l'élément externe définit margin-top:14px, margin-bottom:14px sera automatiquement généré. Des problèmes similaires se produiront également dans le padding, qui sont toutes des spécialités sous IE6. Les situations dans lesquelles ce type de bug se produit sont bien plus que ce type de condition d'occurrence, et elles n'ont pas été systématiquement résolues. Solution : définissez une bordure ou un flotteur sur l'élément extérieur.

Extension : Les explications de margin-bottom et padding-bottom des conteneurs sous ff et ie sont parfois incohérentes, ce qui semble être lié à cela.

7. En raison du manque de place, je ne m'étendrai pas sur le phénomène de déglutition. C'est toujours IE6, il y a deux p de haut en bas. Le p supérieur définit le fond, mais on constate que le p inférieur qui n'a pas de fond a aussi un fond. Correspondant au phénomène de déglutition du fond ci-dessus, il existe également le phénomène de bordures manquantes sous le défilement. Solution : utilisez le zoom : 1. Ce zoom semble être spécialement conçu pour résoudre les bugs d'IE6.

8. Les commentaires peuvent également provoquer des bugs ~~~ "Un cochon supplémentaire." C'est la copie utilisée par les personnes précédentes pour résumer ce bug dans IE6, tout le monde verra le mot cochon sur la page. . Apparaît deux fois, la quantité de contenu répété varie en fonction du nombre de commentaires. Solution : utilisez la méthode "4499f6a8610053d8568717ec1441c42d picRotate start dbeaff94c2f1d72b0d673ef6e0c76b56" pour rédiger des commentaires.

9.f4eded972c7446ec3fad4550e77f2a65Riga float a6f776b766579c28d02706af09482172, il s'agit d'un problème de compatibilité typique et difficile. J'espère que tout le monde y prêtera attention. Différents attributs de li auront des effets d'interprétation différents. , l'explication sous ff est légèrement compréhensible, mais l'explication sous ie6 vous rendra confus. En raison de la complexité du problème, un article séparé sera consacré à la discussion de cette question. Il y a des résultats pertinents dans l'article « expérience d'utilisation d'ul », mais le processus de résolution du problème n'est pas indiqué.

10. Le comportement étrange de ul utilisant "float:left;display:inline". On peut voir que ce CSS est ajouté à display:inline en réponse au bug de double marge sous ie6. C'est également une partie importante de mon système CSS. Cela est expliqué dans l'article "Utilisation de l'expérience ul". Et ce CSS vous rendra malheureux lorsqu'il sera utilisé sur ul. C'est tout pour l'instant, je ne peux pas en dire beaucoup plus ici.

L'espace vide sous 11.img, voyons ce qui ne va pas avec ce code :

<p> 
<img src=”” src=”” /> 
</p>

Ouvrez la bordure de p, et vous constatez que le bas de l'image est pas proche du conteneur Celle du bas est provoquée par les caractères vides après img Pour l'éliminer, vous devez écrire comme ceci :

<p> 
<img src=”” src=”” /></p>

Les deux balises suivantes doivent être à côté de chacune. autre. Ce bug existe toujours sous ie7. Solution : définissez display:block sur img.

12. Perdez la hauteur de la ligne. 11e63281a8d19e0bb34812b7750271ac6ed09268cbdd0015bce8dcbbdfa9bfe4Text94b3e26ee717c64999d7867364b1b4a3 Malheureusement, l'effet de hauteur de ligne d'une seule ligne de texte disparaît dans IE6. . . , la raison est que 6ed09268cbdd0015bce8dcbbdfa9bfe4 l'élément inline-block et l'élément inline sont écrits ensemble. Solution : faites en sorte que l'image et le texte flottent.

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。 

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。 

14.非链接的hover状态。p:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。 

15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。 

想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。 

16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？ff6d136ddc5fdfeffaf53ff6ee95f185af75337a6c97830a646fbd872a63c031bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6e388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632ebe388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689e388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3 或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 
<style type=text/css> 
.c{clear:both;overflow:hidden;+overflow:visible} 
.bd{border:1px solid red} 
ul.ex{list-style:none;} 
ul.ex li{float:left;border:1px solid green;} 
</style> 
<ul class=ex> 
<li>sfsdfsfdf</li> 
<li>sfsdfsfdf</li> 
</ul> 
<p class=c></p> 
<p class=bd style=margin-top:19px>sfsdfsfdf</p>

请在ie下 测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。 

解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用） 

引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
3f69495797ccc6f8a32815d7dd10c89add94b3e26ee717c64999d7867364b1b4a3
f9923316e20b96d9eaf8f1e87c8857a2ff94b3e26ee717c64999d7867364b1b4a3 

17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。 

18.ie6下严重的bug，float元素如没定义宽度，内部如有p定义了height或zoom:1，这个p就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。 

19.ie6下的bug，绝对定位的p下包含相对定位的p，如果给内层相对定位的p高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。 

20.ie6下的bug，93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1内有05ebf4a056fdba313520357d9cd80571的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。 

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。 

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS透明opacity和IE各版本透明度滤镜filter的用法

关于webpack项目混用css module的方法

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!