IE6兼容性的几个问题

IE6下的内外边距问题：

       IE6里面的div会挤压外面的div：造成各个浏览器宽度不同是由于IE6使用margin或padding会挤压div的宽度，导致宽度变长造成的，而IE7,IE8不会。无论是IE7还是IE8使用padding都会往外挤，只是IE6不够位置了会挤压到变形，而其他浏览器不够位置则会各个模块的空间重叠在一起。

margin与padding的区别：

margin挤压别的容器，别的容器不一定会被挤压扩大

padding挤压自身，自身肯定会被挤压扩大

使用margin和padding调节宽度的注意事项，注意在IE6，IE7，IE8中测试；

 

 

 

 

IE6双边距问题：

在IE6下面，红色的容器并没有按我们想象的去排列，这就是产生双倍距离的问题。

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

解决办法很简单，就是在红色容器的CSS加入 display:inline 属性

 

 

 

 

注释bug：

IE6出现重复字符的bug（注释bug、3pixbug）

一个容器包含2两个具有“float”样式的子容器。
第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3。（说到3，这里稍微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”）
在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。

为何会出现重复文字
bug虽然的的确确的存在，但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词，谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来，但是现在仍然没有官方的说法。下面列出来的这两种说法，是只是现在网上认可度比较高的而已——

IE6浏览器对<!-- -->注释的解释存在bug引起的。
“3像素bug”的扩展后遗症。（“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到）
其他的一些说法

如何消灭重复文字
引起的原因，也许我们可以不知道，但是如何去消除却是我们一定要关注的。
“歌剧院魅影bug”已经在IE7中得到修正，在FireFox和Opera中也不会出现，所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”，如果要修正bug，只要让任何一个条件不满足即可——

改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论：疯了！因噎废食的做法。
减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3，例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论：在满足页面布局的前提下可以使用。但是当情况比较复杂的时候，可能实施起来比较困难。
去掉所有的注释。
——此解决方案的评论：最直接的做法，但是“没有注释的代码”，的确不是一个好的代码写作习惯。
修正注释的写法。将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->
——此解决方案的评论：还不错的解决方案，但是并不是每个人都对<!--[if !IE]>这里是注释内容[endif]-->这种注释写法很欣赏。
在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
——此解决方案的评论：另人感觉很不爽的解决方案。但是的确能解决。