已经受够了IE6了，什么时候IE6能灭绝？
IE6下不支持border-color:transparent，而众所周知的解决办法是使用chroma滤镜。
chroma滤镜的作用是，将此节点内的指定颜色变为透明。所以这样就可以实透明边框：
而我们在对ExtJs的功能扩展中，有使用透明边框，理所当然，也要做IE6的hack。
而现在问题产生了，chroma滤镜在特定的嵌套条件下，会使得其内的文字也一起透明：
实际效果图：
[img]http://dl.iteye.com/upload/attachment/441911/2723c512-7c3c-31ef-bc6a-7e2734b77e71.png[/img]
概括来说，就是两个使用了chroma滤镜的触发了hasLayout（zoom:1触发）的元素，中间隔着一层使用了float并开启overflow的元素，进行嵌套时，其下的所有的进行了定位（position）的元素都会透明。（radio除外）
...好吧，很绕口，我的语文并不好
以上条件可能并不是最简的，不过已经无兴趣再测试了。
这个问题在IE6~8都有，只是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>
实际效果图：
[img]http://dl.iteye.com/upload/attachment/441911/2723c512-7c3c-31ef-bc6a-7e2734b77e71.png[/img]
概括来说，就是两个使用了chroma滤镜的触发了hasLayout（zoom:1触发）的元素，中间隔着一层使用了float并开启overflow的元素，进行嵌套时，其下的所有的进行了定位（position）的元素都会透明。（radio除外）
...好吧，很绕口，我的语文并不好
以上条件可能并不是最简的，不过已经无兴趣再测试了。
这个问题在IE6~8都有，只是IE6必须使用所以才无法避免。
玩IE6的伤不起啊伤不起！！！
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
