现对目前接触到的兼容性问题做个总结，慢慢补充啦~~~IE6真是爹啊啊~~~

 

1.  最小高度问题：在IE6下，当元素高度<19px时候，当成19px来处理。

　　解决：给元素添加overflow:hidden;

2.  border:1px dotted #000;在IE6下效果等同于dashed，但是从2px开始就可以兼容dotted。

这里还有一个问题就是当border的width越来越大的时候，比如为10px，那么chrome此时dotted是正方形，其他浏览器是width为10px的圆！

3.  IE6下对块元素设置display:inline-block;无效！

4.  当li元素内还嵌套eg.<a><span>等子元素，如果li的子元素均浮动，那么在IE6、7下，li的下方会出现间隙。

　　解决：方法一：给li加浮动。

　　　　　　　此时如果不给li设宽度，在IE6、7下li的宽度会继承父级的宽度！但是在标准浏览器下子元素同时变为左浮动，li的宽度则是li的子元素的宽度之和！！

　　　　　方法二：给li加vertical-align。（这条不会带来其他问题）此时，标准浏览器下li继承ul的宽了！

IE6、7下，如果不给子元素设定宽高，子元素总会继承父元素的宽高值！！！

5.  IE6下的双边距问题：

　　出现该问题的必要条件：IE6下，块元素   浮动，设置横向margin，此时横向的margin会变为设置的margin值的双倍！（其实是最左第一个和最右第一个变为双倍，中间相邻的各个元素间的margin值是：前一个的margin-right+后一个的margin-left值）

　　如果是添加margin-left，那么只有左边起第一个元素的左margin变为双倍，同理，添加margin-right是是有右边起第一个元素的右margin变为双倍。

　　解决：添加display:inline;

6.  当一行子元素占有的宽度之和比父元素的宽度大3px，或者子元素没有占满最后一行时，最后一行的子元素的margin-bottom会消失！！

　　无解决办法，只能是尽量规避引起问题的这些原因。

7．在IE6下的文字溢出BUG

       当父元素内有两个元素，并且这两个元素都是浮动元素时，如果子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素时，第二个子元素的文字会出现在下一行，添加的注释、内嵌元素越多，溢出的文字越多。

当父元素内有多个元素，并且这些所有元素都是浮动元素时，如果子元素的宽度和父级的宽度相差小于3px的时候,任意两个浮动元素中间有注释或者内嵌元素时，总是最后一个子元素的文字溢出。。

　　解决：用div把注释或者内嵌元素用div包起来

8． 当浮动元素和绝对定位元素是并列关系时，在IE6下绝对定位元素会消失。

　　解决：给定位元素外面包个div，让两者不是并列关系就可以了

　　自己实践了下面几种情况，后来突然发现只要不让两者是并列关系就可以解决！！不需要考虑这么多！如在实践中遇到定位元素消失的情况那么就考虑是不是这种情况引起的。

      1. margin:0 0 0 0-97px; float:left;      ----->>  绝对定位元素不消失

      2. margin:0 0 0 98-100px; float:left;   ----->>  绝对定位元素消失了！！

      3. 只有float:right;                            ----->>  绝对定位元素不消失

      4. margin:0 0 0 98-100px; float:right; ----->>  绝对定位元素消失了！！

      5. margin:0 98-100px 0 0 ; float:right;----->>  绝对定位元素消失了！！

      6. margin:0 0-97px 0 0 ; float:right;   ----->>  绝对定位元素不消失

 

 

9.  在IE6、7下，如果父级设置overflow:hidden;且子元素设置了relative定位，如果子元素的高度大于父元素，那么此时hidden的作用无效！子元素的高度依旧会超出父元素

　　解决：给父级也添加一个position:relative;

10.  给某一元素设置position:absolute;并且它的父元素设置的宽高为奇数时，在IE6下，如果是用right和bottom设置偏移量，那么这两个偏移量的值会有1px的偏差。left和top并没有该问题！

　　无解决办法，所以设置时尽量不要用奇数！

11.  IE6不支持固定定位：position:fixed;所在IE6下以只能是用js实现固定定位！

 

 

12.  png24在IE6下不支持的问题

在<head></head>中写如下语句：（.box表示需要插入png图片的元素的类名，如果都需要用这个，就用通用符*咯~）

<!--[if IE 6]>

<script src="DD_belatedPNG_0.0.8a.js"></script>

<script>

DD_belatedPNG.fix('.box');

</script>

<![endif]-->

10.  !important涉及的兼容性问题

      background:red !important; background:pink;

      在IE6下，在important 后边再加一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走，即：默认样式 < 类型 < class < id < style(行间)