ie兼容性问题的一些总结，待添加。后续有图

1、H5标签兼容。

主要是ie67.在使用<header>header</header>这样的h5标签时在在头部

<script>document.createElement(“header”);</script>

通过这样创建的叫做自定义标签。自定义标签都是内联元素。所以有的时候需要在css中声明为块元素。

但是对每个h5标签都这样创建自定义标签就会很麻烦。这样可以引入一个插件，包含了对所有的h5标签的声明定义。

2、ie6.元素浮动之后,能设置宽度的话就给元素加宽度.

如果需要宽度是内容撑开,就给它里边的块元素加上浮动; （比如父级是div块元素，而子级是h2块元素。如果是给div加浮动，那么ie6下h2块元素就会显示在另一行，

此时解决方法是给h2加浮动。

3、第一块元素浮动,第二块元素加margin的值等于第一块元素的宽时,在IE6下会有间隙问题;

中间有间隙。

解决方法:1)不建议这么写。因为第一块元素浮动后两个元素就不在一个层级了。

2）用浮动解决。给第二个元素也加一个浮动。

4、IE6下子元素超出父级宽高，会把父级的宽高撑开

（正常浏览器）（ie6撑开）

解决方案：不要让子元素的宽高超过父元素。

5、p 包含块元素嵌套规则。

（p标签下面嵌套一个div块元素时。默认的竟然变成：<p></p><div></div><p></p>单独出啦了。

解决方案：不能嵌套块元素的标签一定不要嵌套块元素。

p、td、h不要嵌套块元素。

6、margin兼容性问题

         1）margin-top传递。在父级包含子级时，给子级加一个margin-top会被传递到父级。解决方法：给父级加边框（非ie）；触发BFC、haslayout就可以了（overflow、zoom：1）。

2）上下margin叠加

解决方法：尽量使用同一方向的margin，比如都设置top或者bottom（值可以不一样）。

7、display:inline-block：

在ie6下面，使用inline-block时仍然是block的属性，并没有横着排。

 css2.1，ie不兼容（这样就可以解决）

解决方案：*display：inline；*zoom：1；如右上图。

8、IE6 最小高度问题

在正常浏览器下设一个div的高度为1px。正常浏览器会显示一个1px的线，但是在ie6下面会显示：，ie6下的最小高度是19px；

解决方法：加一个overflow：hidden。

9、IE6 双边距，

当一个元素浮动后再设置margin，那么就会产生双倍边距。

（问题） （解决）

此处设置margin-left为50px，但是在加入一个float后，浮动变为100px，双倍了。一般出现在左侧。

解决方案：针对ie67，添加display：inline。

10、li里元素都浮动 li 在IE6 7  下方会产生4px间隙问题

（ie67）（正常）

解决方案：针对ie67添加*vertical-align：top；

 

11、浮动元素之间注释，导致多复制一个文字问题

 

（问题：每多出一个span，ie6下就会多一个字）

问题产生的前提条件：两个浮动元素中间有注释或者内联元素，并且和父级宽度和差不超过3px。如果把上图的right的width改为397px则可以解决。

解决方案：  1）两个浮动元素之间避免出现内联元素和注释。

2）与父级宽度相差3px以上。

12、IE67父级元素overflow:hidden是包不住子级的position：relative

在子级的宽高大于父级的情况下，给父级添加overflow，是可以包住的，但是如果给子级添加一个position：relative，则出现左下的情况。（ie67）

 

解决方案：给父级也加一个*position：relative，将他们放在同一个环境下。

未完待续。。。