小结IE6的坑

Posted 2020-06-18 杨杨0708

1、z-index在position:relative/absolute等定位属性设置后还是无效，会导致top栏的导航栏目的子菜单被下面的层遮住，无法显示；
解决办法：？http://www.wufangbo.com/ie6-ie7-z-index-bug/
就是被子导航列表覆盖的层绝对不能设置为相对定位(在该层中想让其子元素设置为position:absolute;本层设置为position:relative;这样的组合在IE6中是绝对不允许的，解决办法是：去掉父层的position:relative;这个属性，修改其子元素定位为position:relative;即可，这样其父层就不会覆盖子导航列表了)


2、IE6对display:inline-block;属性支持的不全面，对内联元素支持的还可以，但对块状元素这样设置是无效的；
解决办法：
1、display:inline-block; _zoom:1;_display:inline;这样写才行。
2、将要弄成块状内联元素的div等标签换成内联元素span等，给span  display:inline-block;就行了。


3、IE6对png24图片的透明度支持的不好，只对png8的图片才支持其透明度，但是png8的图片品质太低，如果是文本的话
会出现边框锯齿，使得文本图片变得很难看；
解决办法：
用带背景的jgp图片代替，背景要与所在容器的背景一致即可。


4、IE6不支持圆角，圆角要用图片来表现出来，写样式时很麻烦，注意这个问题。


5、IE6不支持box-shadow这个阴影属性，要做阴影效果必须用滤镜，写法是：
box-shadow: 0px 2px 2px #BEBEBE;//这是标准浏览器css3的写法，下面是针对IE6的滤镜写法
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color=‘#999999‘);
注意：color属性千万不能写成#999,一定要写全，否则会导致阴影跑到左上角去。

6、IE6中的select框的边框总是保留默认蓝色，无法去除，且其边框也不能简单的用border:0;或border:none;去除
解决办法是：
在select框外包含一层div,去除select边框即可，div的边框颜色是可以设置的。
具体解决代码是：
□、先给select加一个div父包含块，设置这个父包含块边框颜色为你想要的颜色，如：border: 1px solid #d0dad8;再加上overflow:hidden;属性；表示溢出部分隐藏，其作用原理是：让select偏移-1px的距离，一旦偏移就会触发overflow:hidden;属性，使得select边框被隐藏掉，解决了select边框无法被去除的问题；
□、接着，按照上面的原理，给select加上margin:-1px;属性，刷新，看到select边框被隐藏掉了，只剩下父层div的边框，看上去是那么回事了；
□、但是还有一个小尾巴，select默认的右边框还是蓝色的，且显示在没有溢出的div父层内，这时的解决办法是，增大select的宽度width为102%;表示比父层宽，原理也是宽出的部分会被隐藏掉，至此，就完成了兼容IE6以上的select边框的问题
□、最后，要注意的是别再表格单元格内使用以上效果，因为这么做会遮盖掉单元格td的右边框。