progid:DXImageTransform.Microsoft.Alpha滤镜和背景色的冲突问题

   

 前段时间在弄系统界面改版的时候，把原本纵向的动态菜单改成了横向下拉菜单。在测试中发现了层不能覆盖下拉框的问题,该问题好像说是IE特有的，然后搜了一下解决方法。
    该问题目前通用的解决方法有三个：
    一个是自己用层重写一个下拉框控件来代替目前的<select>标签；
    第二个方法是在层展开时把页面和框架上所有的下拉框都隐藏起来，层折叠的时候再重新显示；
    第三个方法就是把iframe放到层里面，利用iframe比下拉框优先的特性达到包含iframe的层能覆盖下拉框的效果；
或者还有其它方法也说不定，但是我只找到这三种。
    第一种方法成本最高，特别是弄成asp.net控件的形式。估计用dotnet的也没有多少个会用单纯客户端下拉框的了。第二方法最简单，写个js函数就完事了，但是用户使用起来怎么看都像是一个bug。最后一个方法应该是效果和投入比最好的，只要在层里面加一个相对定位和透明的iframe，所有问题都解决了。
    基于以上的考虑，便在菜单的层里面加了一个iframe，div和iframe的定义如下：

 

1<DIV class=st_divcss id=STM0_1__    style="Z-INDEX: 1010; FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,Duration=0.5) progid:DXImageTransform.Microsoft.Alpha(opacity=100); VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute"  >
2
3<IFRAME id=STM0_1__i style="background:#000;Z-INDEX: -1000; LEFT: 0px; WIDTH: 149px; POSITION: absolute;progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,Duration=0.5) progid:DXImageTransform.Microsoft.Alpha(opacity=100);"  onload="setWidth(this,'STM0_1__TB');">
4</IFRAME>
5
6</div>

 

<div>标签是原来的层，<iframe>是新加的。加入后，原本的层确实能覆盖下拉框，但是也加入的iframe把原来的层也覆盖了。iframe里面的css透明滤镜一点也不起作用。后来折腾一翻后发现iframe的背景色和滤镜有冲突，把<iframe>的style属性里面的background去掉，iframe就不覆盖层的内容了。但随之而来的就是iframe透明滤镜发生了作用，连带包含它的层也透明了......最后把iframe的透明滤镜也去了，就一切正常了。

1<DIV class=st_divcss id=STM0_1__    style="Z-INDEX: 1010; FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,Duration=0.5) progid:DXImageTransform.Microsoft.Alpha(opacity=100); VISIBILITY: hidden; WIDTH: 0px; POSITION: absolute"  >
2
3<IFRAME id=STM0_1__i style="Z-INDEX: -1000; LEFT: 0px; WIDTH: 149px; POSITION: absolute;"  onload="setWidth(this,'STM0_1__TB');">
4</IFRAME>
5
6</div>

也知道是什么原因，反正这样就既能覆盖下拉框，层的内容也能正常显示，而iframe也不会显示。

另外要提醒一下的就是，iframe的大小一定要设置的和层大小一致。不然效果还是会有点怪异。