浏览器兼容性问题及解决方案概览.pdfVIP

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.divstyle“border:1pxsolidred;height:10px”/div

b.divstyle“border:1pxsolidred;width:10px”/div

c.divstyle“border:1pxsolidred;float:left”/div

d.divstyle“border:1pxsolidred;overflow:hidden”/div

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

用，divstyle“height:10px;overflow:hidden”/div，小height值

要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容

器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.最被痛恨的double‑marginbug。在ie6下给浮动容器定义margin‑left或者

margin‑right的实际效果是数值的2倍。解决方案：给浮动容器定义disy:inline。

5.镜像边距Bug，当外层元素内有浮动元素时，如果外层元素定义了

margin‑top:14px，将会自动生成margin‑bottom:14px。padding也会出现类似的问

题，这些都是IE6下的特有现象，这类Bug出现的情况较为复杂，远不止这一种出现

条件，还

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.divstyle=”border:1pxsolidred;height:10px”/div

b.divstyle=”border:1pxsolidred;width:10px”/div

c.divstyle=”border:1pxsolidred;float:left”/div

d.divstyle=”border:1pxsolidred;overflow:hidden”/div

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

divstyle=”height:10px;overflow:hidden”/div，小h