IE6下select总是在最上层的解决办法！

design_ss 21/02/13, 08:30 am

Select的遮盖问题

这个问题可是ie6下相当经典的问题了。简单的说就是ie6下select永远在position:absolute的div上面，这个在想用div来做个对话框时经常会遇到。比方下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div class="down">
<select>
<option>This is a select.</option>
</select>
</div>
<div class="up">This is upper div.</div>
</body>
<style type="text/css" title="">
div{position:absolute;width:180px;height:60px;}
.up{top:0;left:0;background:skyblue;}
.down{top:15px;left:15px;background:yellowgreen;}
</style>
</html>
然后在浏览器中的显示效果如下：

（ie6下的效果）	（其他浏览器）

因为在IE6中iframe是可以覆盖select，而div又可以覆盖iframe（一物降一物？），所以解决方法如下：

用iframe覆盖select

在up的div里添加一个iframe，大小至少要能覆盖select。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div class="down">
<select>
<option>This is a select.</option>
</select>
</div>
<div class="up">
<iframe></iframe>
<div class="up-inner">This is upper div.</div>
</div>
</body>
<style type="text/css">
div{position:absolute;width:180px;height:60px;}
.up{top:0;left:0;}
.up-inner{background:skyblue;}
.down{top:15px;left:15px;background:yellowgreen;}
.up .up-inner,.up iframe{position:absolute;width:100%;height:100%;top:0;left:0;}
</style>
</html>
值得注意的是，如果iframe的allowTransparency="true"时是不能遮盖住select。这种情况下，如果要透明可以用filter:Aplha(Opacity=?)。

iframe遮盖select是个不错的解决方案，但并不完美。被iframe遮盖的select某种意义上“消失”了。如果将iframe的透明度调低，就会发现，select不在那里。。比方将上例中的up的宽度调低，并加上透明度，超囧的一幕就会出现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div class="down">
<select>
<option>This is a select.</option>
</select>
</div>
<div class="up">
<iframe></iframe>
<div class="up-inner">This is upper div.</div>
</div>
</body>
<style type="text/css" title="">
div{position:absolute;width:120px;height:60px;}
.up{top:0;left:0;filter:alpha(Opacity=80);}
.up-inner{background:skyblue;}
down{top:15px;left:15px;background:yellowgreen;}
up .up-inner,.up iframe{position:absolute;width:100%;height:100%;top:0;left:0;}
</style>
</html>

（另一半select神奇消失）

这个怎么解决我就不知道了，有人知道的话记得告诉我哦~

周一	周二	周三	周四	周五	周六	周日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30