时光博客 - WEB开发中的可用性和用户体验
2010年08月的文章

IE6遮罩层select的BUG

ie6的BUG太多,其中一个就是遮罩层(div)遮不住select框,而IE7以上版本是没有此问题的。现在来重现一个bug点击查看演示页面

截图03.jpg

大小: 45.82 K
尺寸: 500 x 183
浏览: 371 次
点击打开新窗口浏览全图

下图为 > IE7 效果:

截图02.jpg

大小: 45.93 K
尺寸: 500 x 175
浏览: 277 次
点击打开新窗口浏览全图

遮罩层在IE下面,是遮不住select下拉选择器的。于是采用一个特殊的方法:

虽说div直接盖不住select但是div可以盖iframe,而iframe可以盖select,所以,把一个iframe来当作div的底,这个div就可以盖住select了.

当使用了iframe后发现,弹出界面是透明白色的,而不是想象中的透明黑色,于是在src中加入一个透明网页:

  1. <html> 
  2.     <head> 
  3.         <title></title> 
  4.     </head> 
  5.     <body style="background-color:#000;"></body> 
  6. </html> 

最后的遮罩层div代码如下:

  1. <div id="overlay"> 
  2.     <iframe style="width:100%;height:100%;position:absolute;visibility:inherit;z-index:-1;" src="touming.html" frameborder="0"></iframe> 
  3. </div> 

问题虽然解决了,但是还是不完美,因为遮罩层显示的时候,虽然遮罩层盖住了select,但是如此同时select也消失不见了 = = !

截图04.jpg

大小: 38.59 K
尺寸: 500 x 176
浏览: 259 次
点击打开新窗口浏览全图