Analyse des causes d'incompatibilité des navigateurs CSS et solutions Page 1/2_Échange d'expérience

在下不才，归纳几点html编码要素，望能指点各位：
1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。


a.

b.

c.

d.

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，

，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.浮动的清除，ff下不清除浮动是不行的。

纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。

5.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。

9.

里加 float

，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。

10.使用了“float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止，这里不能多说哈。  

11.img下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

12.失去line-height。

文字

, Malheureusement, l'effet de hauteur de ligne du texte sur une seule ligne disparaît sous IE6. . . , la raison est Cet élément inline-block est écrit avec l'élément inline. Solution : faites en sorte que l'image et le texte flottent.

Extension : tout le monde le sait img L'alignement inclut le texte en haut, au milieu, au milieu, etc. Vous pouvez essayer d'ajuster l'image. Rendez-les cohérents avec le texte dans IE et FF, et vous constaterez que peu importe la façon dont vous les ajustez, vous ne serez pas satisfait. Laissez simplement l'image et le texte flotter et ajustez-les avec une marge.

13. Le statut de survol du lien. a : survoler l'image {largeur : 300 px} Nous souhaitons que la largeur de l'image contenue dans le lien change au survol de la souris. Malheureusement, elle n'est pas valide sous ie6 et valable sous ie7 et ff.

14. Statut de survol non lié. Le style div:hover{} n'est pas reconnu par IE6 et ne fonctionnera que sous IE7 et FF.

15. Le lien bloqué a un calque absolu à l'intérieur, et une img est placée à l'intérieur du calque absolu, cliquer sur l'img avec la souris n'aura pas d'effet de lien, mais ce sera normal. sous ff et op.

Je n’en trouve aucun, j’en ajouterai plus plus tard si j’y pense. Si vous maîtrisez les secrets de bon nombre des problèmes ci-dessus, 90 % des problèmes d'incompatibilité ne nécessiteront pas un nouveau hack CSS.

16. Flotteur qui ne peut pas être complètement dégagé. Si le li sous ul a l'attribut float, comment effacer le li flottant ?

• class=”c”>

ou

class=”c”>

ou

class=”c”>

Ou une combinaison de ce qui précède ? Je ne peux pas donner de réponse à cette question. Voici un exemple lié à ceci

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;}

• sfsdfsfdf


• sfsdfsfdf

class=c>

sfsdfsfdf

Veuillez tester sous IE, changez simplement margin-top:19px remplacé par margin-top:20px Qu'avez-vous trouvé ? Éléments : le doctype doit être présent, margin-top:19px convient sous ie6 et ie7, margin-top:20px Quelque chose s'est mal passé et je ne peux pas l'expliquer. . . Vous pouvez également modifier le calque transparent dans une position différente à des fins de test.

Solution : Ajouter zoom:1 à l'attribut ul (ajouter zoom:1 à li est inutile)

Extension : la couche transparente doit être utilisée seule. Peut-être que vous placez l'attribut clear directement dans une couche de contenu ci-dessous afin de sauvegarder le code. Non seulement l'effet de marge sera perdu sous ff et op, mais certaines valeurs de marge seront également invalides sous ie.

dd

style=”clear:both;margin-top:18px;background:green”>ff

17.ie sous overflow:hidden, il n'est pas valide pour la position absolue du calque: absolue ou la position relative du calque: relative. Solution : Ajoutez position:relative ou position:absolute à overflow:hidden. De plus, ie6 prend en charge les fonctionnalités overflow-x ou overflow-y, mais ie7 et ff ne les prennent pas en charge.

Un bug sérieux sous 18.ie6. Si l'élément float n'a pas de largeur définie, et s'il y a un div à l'intérieur qui définit la hauteur ou le zoom:1, le div remplira toute la ligne, même si vous donnez c'est une largeur. Si l’élément float est utilisé comme mise en page ou conteneur complexe, il faut lui attribuer une largeur.

Un bug sous 19.ie6, le div positionné de manière absolue contient un div positionné relativement si la hauteur du div positionné relativement dans la couche interne reçoit une valeur de hauteur spécifique, la couche relative dans la couche interne le sera. aura une valeur de largeur de 100 % et la couche externe aura une valeur de largeur de 100 %. La couche absolue sera étirée. La solution consiste à donner à la couche interne un attribut float à la couche relative.

Bogue sous 20.ie6, Dans le cas de target="_blank"/>, le texte du calque flottant sous le calque position:relative ne peut pas être sélectionné. Ce bug m'a obligé à corriger la bibliothèque de styles commune.

21. Finalement il y a une lacune de ff. Largeur: 100% est très pratique à utiliser dans IE. Il recherchera la valeur de largeur couche par couche vers le haut, en ignorant l'influence du calque flottant, et recherchera sous ff jusqu'à la fin du calque flottant. ajoutez seulement de la largeur : 100 % à tous les calques flottants du milieu. Ça y est, je suis fatigué. Opera l'a bien appris et a suivi, c'est-à-dire.