在上一家公司做网站的时候遇到一个问题,IE6下select标签覆盖div的问题。
虽然很多人很讨厌IE6,但是IE6.0还是有很多用户,特别是前端设计人员,很多Bug让人很纠结,关于IE6下select标签覆盖div的问题,现在已经有完美解决办法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IE6下select标签覆盖div的解决办法</title>
</head>
<body>
<div style="position:absolute;background:red;width:200px;left:20px;top:20px;">
<!--[if IE 6]><iframe style="position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe><![endif]-->
IE6下select标签覆盖div的解决办法<br>
可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的 Z轴高度上来!
</div>
<select><option>内容终于被盖住</option></select>
IE6下select标签覆盖div的解决办法
</body>
</html>
虽然很多人很讨厌IE6,但是IE6.0还是有很多用户,特别是前端设计人员,很多Bug让人很纠结,关于IE6下select标签覆盖div的问题,现在已经有完美解决办法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IE6下select标签覆盖div的解决办法</title>
</head>
<body>
<div style="position:absolute;background:red;width:200px;left:20px;top:20px;">
<!--[if IE 6]><iframe style="position:absolute;width:100%; height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe><![endif]-->
IE6下select标签覆盖div的解决办法<br>
可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的 Z轴高度上来!
</div>
<select><option>内容终于被盖住</option></select>
IE6下select标签覆盖div的解决办法
</body>
</html>