ie6 select无法被div遮盖的bug解决方法

在使用div制作蒙版或模拟弹出窗口时，我们有时会遇到在IE6浏览器下的一个特殊问题。当div下方有下拉列表框（select元素）时，下拉列表框会“划破”div显示出来，无论我们如何调整z-index的值，这个问题都会出现。这可能是由于下拉列表控件的弹出式特性导致的Z轴高度失控。

面对这一难题，IE6展现了一个独特的逻辑：虽然div无法覆盖select元素，但iframe却可以。div可以覆盖iframe，我们可以利用iframe元素来解决这个问题。通过创建一个包裹或覆盖下拉列表控件的iframe，我们可以将其Z轴高度恢复到正常状态。

以下是使用iframe解决此问题的HTML和CSS代码示例：

HTML结构如下：

```html

```

对应的CSS样式为：

```css

.aboxinitcss {

position: absolute;

margin-top: 0px;

margin-left: 0px;

display: none;

background: FFF;

border: solid CCC 1px;

padding: 30px;

z-index: 9999; / 确保div的Z轴位置较高 /

width: 620px;

overflow: hidden;

}

.ifhideselect {

z-index: -1; / 确保iframe的Z轴位置较低，以覆盖select元素 /

width: 680px;

height: 255px;

position: absolute;

border: 0;

left: 0;

top: 0;

}

```

重要的是，iframe的z-index必须设置为负数，以确保它能够覆盖下方的select元素。通过这种方式，我们可以成功地解决在IE6浏览器中的下拉列表框显示异常问题。至于提到的 `cambrian.render('body')`，它可能与特定的框架或库相关，用于渲染页面内容。但在解决上述问题时，我们主要关注的是浏览器兼容性和HTML/CSS的使用。