最近碰到个问题，到处查找，最终得到解决，现记录下。
问题：在IE6（更高版本的IE中无此问题）中DIV层被select给覆盖。
解决：使用frame作为垫板，代码示例如下
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
分享到：
相关推荐
2. **iframe隔离法**：在Div上层创建一个透明的iframe，设置适当的宽高，覆盖Select所在的位置。由于iframe自身形成一个新的层叠上下文，它可以防止Select覆盖Div。不过这种方法可能会影响页面性能，且在某些情况下...
在互联网的早期，Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器，但它的兼容性和渲染机制存在诸多问题，其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现，但在IE6中，`...
在IE6浏览器中，由于其自身的布局特性，当一个`div`元素试图覆盖一个`select`下拉框时，会遇到一些棘手的问题。这个问题主要体现在`select`元素总是会出现在`div`之上，无论`div`的`z-index`设置得多高。这在网页...
1. **使用iframe**：将需要覆盖`select`的`div`内容放入一个`iframe`中，由于`iframe`在IE6中拥有独立的堆叠上下文，可以有效遮挡`select`。 2. **模拟Select**：使用JavaScript或jQuery库（如`select2`或`...
select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可，参数传相关背景图片就可。我都已经放到资源包下了。
1. 使用jQuery bgiframe插件：该插件创建一个透明的iframe层，将被遮挡的div覆盖在select之上，从而避免遮挡问题。 2. 避免使用绝对或相对定位：改用其他布局方式，如使用浮动（float）或Flexbox（对于现代浏览器）...
由于div无法直接覆盖select，但iframe可以，然后再让div覆盖iframe，这样就可以间接使得div覆盖select。具体实现方法有以下两种： 1. 将iframe元素作为select元素的容器，直接包裹select，如下代码所示： ```html ...
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...
通常，`div`元素比`select`元素有更高的默认`z-index`，但某些浏览器（尤其是IE6和7）可能会忽略这一点，导致`div`无法覆盖`select`。 1. **创建堆叠上下文：** 确保`div`和`select`元素都存在于同一个堆叠上下文中...
本文将深入探讨如何利用jQuery解决一个特定的问题：在IE6下，Select元素总是显示在具有较高z-index的图层（如div）之上。 首先，我们要理解z-index的概念。在CSS中，z-index是一个用于控制元素在垂直方向（即Z轴）...
在互联网的早期，尤其是IE6浏览器占据主导地位的时代，开发者们常常会遇到一个棘手的问题：在页面上，当一个`div`层位于`select`下拉框之上时，`select`控件会穿透`div`层显示出来，导致设计效果无法正常展现。...
这个问题主要出现在IE6至IE9等旧版本的浏览器中。 jQuery.contextbox是一个用于创建弹出框或提示框的插件，它可以帮助开发者创建各种类型的交互式对话框。在描述中提到的博客文章链接中，作者可能提供了使用这个...
它会在指定的元素上创建一个透明的背景iframe，从而达到模拟z-index的效果，使得`<div>`能正确地覆盖住`<select>`。 在描述中提到的"jquery.bgiframe示例"链接，指向了一篇博客文章，博主通过实例展示了如何使用这...
3. **SELECT元素覆盖**：修复了IE6和IE7中SELECT元素无法被div覆盖的问题，这为CSS定位和层叠提供了更好的支持。 **第二节：IE7-IE8 更新** 1. **CSS表达式**：IE7支持的CSS表达式在IE8中被废弃，转而支持增强的...
### 解决IE6环境下`select`元素的`title`属性无法正常显示的问题 在Web开发过程中，经常会遇到一些浏览器兼容性问题，特别是在处理老旧版本的Internet Explorer（IE）时更为明显。本文将针对一个特定的问题——如何...
IFrame可以创建一个新的z-index上下文，使得其内容可以正确地覆盖select元素。但这可能会引入额外的复杂性和性能开销。 4. **利用EasyUI的特性**：EasyUI提供了一些API来处理这种情况。例如，可以使用`onOpen`回调...
在探讨“css+div在IE中兼容”的问题时，我们面临着一个历史遗留下来的挑战：Internet Explorer（以下简称IE）浏览器由于其版本迭代过程中对CSS支持的不一致性，导致在开发基于CSS布局的网站时，需要特别注意跨浏览器...
在IE6中，`<iframe>`可以覆盖`<select>`，同时`<div>`又能覆盖`<iframe>`。通过巧妙地调整`<iframe>`和`<div>`的`z-index`属性，我们可以创建一个层次结构，使得`<select>`最终被有效地遮盖住。 具体实现步骤如下：...