随着微软windows系统系列的推出,当初的windows xp系统渐渐淡出操作系统的舞台,被新的有活力的操作系统所代替。虽然它渐渐推出了我们的视线,但是在某些地方我们还是能看到他们的,仍然在使用, 所以对于做前端开发的人员一定要考虑到我们制作儿的网页与windows xp操作系统的兼容问题——就是与IE6的兼容问题。
现在的浏览器种类繁多,可以说我们前端开发的东西在很多浏览器上都能使用,一般没有多大的问题。可是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的方向不一致时,那么这个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兼容问题的一些看法和总结,希望对你的编程有所帮助。。。。。