最近遇到ie6下一个比较经典的问题,就是ie6下select元素会戳破弹出层的问题。在网上看了很久,很多博客的推荐了iframe解决方案,但是实际上去试时,依然无法工作。(大家还是要试一下,或者注明一下是转的,不然会误导一些同学)
这里结合自己的实际,将解决方案叙述如下。
源代码:
<html>
<style>
.dest{
position:absolute;
height:43px;
width:200px;
z-index:100;
background:#ccc;
left:0;top:0;
}
.sel{
position:absolute;
height:16px;
width:122px;
z-index:4;
left:0;
top:0;
}
</style>
<body>
<div class="dest">
I am here, can you see me.
</div>
<select id="seIM" class="sel">
<option value="0">QQ</option>
<option value="1">MSN</option>
</select>
</body>
</html>
在ie6下效果如下:select将该目标div戳破,不管你怎么设置z-index:
解决方案:
利用ie6下特殊的覆盖规律,iframe可以遮挡select,而div可以遮挡iframe,有如下两种方案
(1)直接在select上放置一个iframe
(2)在需要展示的元素下放置一个select元素
对比这两种解决方案,方案(2)更加灵活,且能够有的放矢,方案(1)需要在每个select元素放置元素,不方便。所以本文采用了方案(2)。
源代码
<html>
<style>
.dest{
position:absolute;
height:43px;
width:200px;
z-index:100;
background:#ccc;
left:0;top:0;
}
.h-iframe{
width:100%;
height:100%;
background:transparent;
position:absolute;
border:none;
top:0;left:0;
padding:0;
margin:0;
z-index:-1;
filter:alpha(opacity=0);/*这个不可少,否则iframe将展示默认的样式,将取代目标元素的展示*/
}
.sel{
position:absolute;
height:16px;
width:122px;
z-index:4;
left:0;
top:0;
}
</style>
<body>
<div class="dest">
I am here, can you see me.
<iframe class="h-iframe"></iframe>
</div>
<select id="seIM" class="sel">
<option value="0">QQ</option>
<option value="1">MSN</option>
</select>
</body>
</html>
效果如下图,正视期望值。
注意
(1)iframe里的filter样式不可少,否则会展示iframe默认样式。读者可以自己尝试,网上很多例子没有指出这一点;
(2)因为该问题只在ie6出现,所以可以用给iframe外加一个条件判断,这样其他浏览器可以避免多渲染这个iframe。