CSS 브라우저 비호환 원인 분석 및 해결 방법 페이지 1/2

CSS 브라우저 비호환 원인 분석 및 해결 방법 페이지 1/2_경험교류

PHP中文网

풀어 주다： 2016-05-16 12:05:12

원래의

1732명이 탐색했습니다.

在下不才，归纳几点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.

上面的代码在不同浏览器中是不一样的，实验起源于对小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。

文字

, Leider verschwindet der Zeilenhöheneffekt von einzeiligem Text unter IE6. . . , der Grund ist Dieses Inline-Block-Element wird zusammen mit dem Inline-Element geschrieben. Lösung: Lassen Sie sowohl das Bild als auch den Text schweben.

Erweiterung: Jeder kennt img Die Ausrichtung umfasst „Text oben“, „Mitte“, „Absmitte“ usw. Sie können versuchen, das Bild anzupassen. Passen Sie sie an den Text in IE und FF an. Sie werden feststellen, dass Sie nicht zufrieden sein werden, egal wie Sie ihn anpassen. Lassen Sie Bild und Text einfach schweben und passen Sie sie mit dem Rand an.

13. Der Hover-Status des Links. a:hover img{width:300px} Wir möchten, dass sich die Breite des im Link enthaltenen Bildes ändert, wenn die Maus darüber bewegt wird. Leider ist es unter ie6 ungültig und unter ie7 und ff gültig.

14. Nicht verknüpfter Hover-Status. Der Stil div:hover{} wird von IE6 nicht erkannt und funktioniert nur unter IE7 und FF.

15. Der blockierte Link enthält eine absolute Ebene und ein Bild wird in der absoluten Ebene platziert. Unter IE hat das Klicken mit der Maus keinen Linkeffekt, aber es ist normal unter ff und op.

Mir fällt keins ein, ich füge später noch mehr hinzu, wenn es mir einfällt. Wenn Sie die Geheimnisse vieler der oben genannten Probleme beherrschen, erfordern 90 % der Inkompatibilitätsprobleme keinen neuen CSS-Hack.

16. Schwimmer, der nicht vollständig beseitigt werden kann. Wenn das Li unter ul das Float-Attribut hat, wie lösche ich das Floating Li?