已经受够了IE6了,什么时候IE6能灭绝?
IE6下不支持border-color:transparent,而众所周知的解决办法是使用chroma滤镜。
chroma滤镜的作用是,将此节点内的指定颜色变为透明。所以这样就可以实透明边框:
.test{ border-color:pink; /*设置一个很少用到的颜色*/ filter:chroma(color=pink); }
而我们在对ExtJs的功能扩展中,有使用透明边框,理所当然,也要做IE6的hack。
而现在问题产生了,chroma滤镜在特定的嵌套条件下,会使得其内的文字也一起透明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <TITLE>IE chroma bug test</TITLE> <style> .test{ border: 1px solid pink; filter: chroma(color=pink); zoom:1; } </style> </HEAD> <BODY> <div class="test" style="border:1px solid pink"> <div style="float:left;overflow:hidden;"> <div class="test"> 以下是正常状态 <div style="background-color:gray;"> <INPUT TYPE="radio" />IE sucks! </div> 加上position:relative后 <div style="position:relative;background-color:gray;"> <INPUT TYPE="radio" />IE sucks! </div> </div> </div> <div style="clear:both;"></div> </div> </BODY> </HTML>
实际效果图:
概括来说,就是两个使用了chroma滤镜的触发了hasLayout(zoom:1触发)的元素,中间隔着一层使用了float并开启overflow的元素,进行嵌套时,其下的所有的进行了定位(position)的元素都会透明。(radio除外)
...好吧,很绕口,我的语文并不好
以上条件可能并不是最简的,不过已经无兴趣再测试了。
这个问题在IE6~8都有,只是IE6必须使用所以才无法避免。
玩IE6的伤不起啊伤不起!!!