首页 > 代码库 > ie6的常见兼容性问题

ie6的常见兼容性问题

(一):选择器的兼容问题

      1.对于一般的选择器如id选择器、类选择器、标签选择器,IE6和其他浏览器一样都兼容;

      2.子代选择器(E>F),序选择器(E:first-child、E:last-child)、兄弟选择器(E+p)这些选择器IE6都不兼容{主要是css2中的选择器,css3中的先不谈}

(二):双倍margin问题

        1.何为双倍的margin?

           解释:就是说当我们连续浮动元素时,如果浮动元素的浮动方向和我们设置的margin方向相同时,浮动元素的第一个元素就会具有双倍的margin值。

           例:ul li{float:left;

                        margin-left:20px;}

                  此时我们的浮动元素和margin的方向相同,那么在第一个li中,它与边框的距离就是40px。

          解决办法:1.可以通过改变条件的方法来阻止这个bug发生。

                           就是说把float方向与margin的方向不一致时,设置成margin-right,那么这个bug也就不存在了,所以在编写代码时要注意到这一点;

                         2.可以通过单独设定浮动元素的首项来解决已经出现的bug

                           我们另外给浮动元素的首项一个margin属性,是他的值是我们前面margin值得1/2,这样也就解决了。

      (三) 3px 问题

              1.何为3px:

         解释:当我们元素有有浮动时,浮动元素的子代使用margin-right来调节自己的位置时,会出现距离边框的距离比我们设定值多出3px的现象。

             例:div{float:right;}
                   div.class{margin-right:10px;}/*div的儿子*/
                  这样写就会出现,儿子距离父亲的距离是13px,而不是10px;
               解决办法:当我们给子元素margin属性时,相当于我们用儿子在踢打父亲,这是不规范的。我们可以通过在父元素中使用padding来解决。
     (四)盒子的兼容性
            IE6不支持宽高小于12px的盒子,任何小于12px的盒子,在IE6中都显得很大。
             解决办法:{height:4px;
                             _font-size:0px;}
                         在属性前面加上下划线之后,此属性就变为了IE6的专属属性,它就能识别了。这是一种“hack”,就是黑客技术。原理就是用文字的高度来撑高盒子的高度,使盒子变大。
     (五)overflow:hidden;
             我们都知道overflow:hidden;是用来清除浮动的影响的。其原理就是给自己本身增加高度,来束缚浮动的元素不影响下个浮动元素。但是在IE6中这个就不好用了。
             解决办法:{overflow:hidden:
                             _zoom:1;}
                          就是在我们添加overflow:hidden;属性时配合_zoom:1;使用就可起到清除浮动影响的作用了。
   因为没有安装IE6,所以不能一一举例说明,请见谅。以上就是我对IE6兼容问题的一些看法和总结,希望对你的编程有所帮助。。。。。

ie6的常见兼容性问题