ie6的常见兼容性问题

Posted 2020-09-22

（一）：选择器的兼容问题

      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兼容问题的一些看法和总结，希望对你的编程有所帮助。。。。。