怎么解析IE6,IE7浏览器兼容性问题

本文将详细解释如何分析IE6和IE7浏览器的兼容性。文章内容质量很高，所以边肖会分享给大家作为参考。希望你看完这篇文章后有所了解。

描述IE6和IE7浏览器的兼容性，主要从文本本身大小不兼容、Firefox下容器高度限制、容器横向断裂等十四种特殊情况来描述。相信这篇文章的介绍一定会帮你有所收获。

IE6,IE7浏览器兼容性问题总结

事实上，浏览器的不兼容往往是由于浏览器之间某些标准的定义不一致造成的。所以我们可以做一些初始化，很多问题都很容易解决。

以下是14种特殊情况，仅供参考：

1.文本本身的大小不兼容。同样的字号：14px宋体在不同的浏览器中占用的空间不同。它实际上在IE中占用16px，在Firefox中占用3px，在Firefox中占用17px，在顶部占用1px，在底部占用3px，在opera中甚至更不一样。解决方案：设置文本的行高。确保所有文本都具有默认的行高值。这一点非常重要。我们不能容忍1px的高度差。

2.集装箱高度限制在2以下。火狐，即定义好容器的高度后，确定容器框架的形状，不会被内容放大，而在IE下，会被内容放大，高度限制无效。所以不要轻易定义容器的高度。

3.水平方向的破箱问题。如果没有定义float容器的宽度，Firefox下的内容会尽可能的扩展容器的宽度，IE下的内容折叠会优先。因此，内容可能被破坏的浮动容器需要定义宽度。

实验：如果有兴趣，可以看看这个实验。在不同的浏览器中测试以下代码。

a . div style div style=" border 33601 pxsolid red；height :10 px "/divb . divstydiv style=" border :1 px solid red；width :10 px "/divc . divstydiv style=" border :1 px solid red；float : left "/divd . divstydiv style=" border :1 pxsolid red；溢出：隐藏的"/div代码在不同的浏览器中是不同的。实验源于小高度值div的应用，div style=" height :10 pxOverflow:hidden/div，小高度值应该与Overflow : hidden一起使用。这只是一个有趣的实验。我想说明的是，浏览器对容器边界的解读大不相同，容器内容的影响结果也不同。

4.最讨厌的双页纸。在IE6下，浮动容器定义左边距或右边距的实际效果是数值的2倍。解决方案，为浮动容器定义display:inline。

5.mirrormarginbug，当外元素中有float元素时，如果外元素定义margin-top:14px，会自动生成margin-bottom:14px。填充物也会有类似的问题，都是IE6下的特殊产品。这种bug的发生比较复杂，远不止这种发生条件，也没有系统整理出来。解决方案：外部元素设置边框或浮动。

扩展：火狐和IE下对容器的边距底和填充底的解释有时不一致，似乎和它们有关。

6.吞咽现象。又是IE6。上面的div和下面的div设置了背景，却发现下面没有背景的div也有背景，这就是吞噬现象。对应的背景吞噬了上面的现象，还有卷轴下边框缺失的现象。解决方法：使用zoom:1。这个变焦好像是专门为了解决IE6bug而设计的。

7.注释也会产生bugs ~ ~ ~ ~“多出来一只猪。”这是前辈用来总结这个bug的文案。在IE6的这个bug下，每个人都会看到猪字在页面上出现两次，重复内容的数量会随着评论的数量而变化。解决办法：用”！ndash[如果！IE]picRotatestart！[endif]ndash；”方法来编写注释。

8.在8.img下留空白。看看这个代码有什么问题：

imgsrcimgsrc=' ' MCE _ src='//div打开div的边框，发现图片底部并没有靠近容器底部，而是img后面的空白字符造成的，必须这样写才能消除。

imgsrcimgsrc=' ' MCE _ src='//div，两个标签是挨着的。IE7，这个bug还是存在的。解决方案：为img设置display:block。

9.失去行高。div style="行高：20 px " img/文字l

t;/div>，很遗憾，在IE6下单行文字line-height效果消失了。。。，原因是<img/>这个inline-block元素和inline元素写在一起了。解决方案：让img和文字都float起来。

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

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

<divstyledivstyle=”background:red;float:left;”>dd</div> <divstyledivstyle=”clear:both;  margin-top:18px;background:green”>Firefox</div>

11.IE下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。

解决方案：给overflow:hidden加position:relative或者position:absolute。另，IE6支持overflow-x或者overflow-y的特性，IE7、Firefox不支持。

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

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

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

关于怎么解析IE6,IE7浏览器兼容性问题就分享到这里了，希望