IE6下select元素与z-index的有关问题（css解决方案）

IE6下select元素与z-index的问题（css解决方案）

最近遇到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下select元素与z-index的有关问题（css解决方案）

解决方案：

利用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>

效果如下图，正视期望值。

IE6下select元素与z-index的有关问题（css解决方案）

注意

（1）iframe里的filter样式不可少，否则会展示iframe默认样式。读者可以自己尝试，网上很多例子没有指出这一点；

（2）因为该问题只在ie6出现，所以可以用给iframe外加一个条件判断，这样其他浏览器可以避免多渲染这个iframe。

IE6下select元素与z-index的有关问题（css解决方案）

相关推荐