在页面设计时,经常会使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!
解决办法一:Iframe包裹select元素
Code
<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug -->
<select name="country">
<option value="1">china</option>
<option value="2">japanese</option>
<option value="1">U.S.A</option>
</select>
</iframe>
解决办法二:以Iframe作为div的子元素,覆盖select元素
Code
.T_iframe
{
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.T_div
{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
<div class="T_div">
<span>这里可以包含其他dom元素</span>
<iframe class="T_iframe"></iframe>
</div>
这样嵌入了iframe的div就不怕被select划破了,方法一使用比较简单,但是应用存在局限,不可能在所有的select元素外添加iframe。方法二有的放矢,在需要的div上面添加iframe,是常见的解决办法。
ASP.NET2.0的服务器端控件Menu菜单控件在IE6下渲染的时候,也遇到了select元素无法覆盖的问题,所以当加载了Menu菜单控件时,会自动注入一个脚本文件,用添加iframe元素的办法来处理这个bug,当菜单项比较多的时候,这个脚本处理会导致菜单加载时有明显的延迟,所以这个菜单控件还是不用为妙!
分享到:
相关推荐
通过以上步骤,我们可以成功地使用`<iframe>`作为遮罩层,解决IE6下`<select>`无法被`<div>`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...
本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...
10. **IE6 Bug解决方法**:双边距Bug、3像素问题、超链接hover失效、z-index问题、PNG透明、min-height、select遮盖等,需要针对性的CSS hack或JavaScript解决方案。 11. **title与alt属性**:`alt`属性为图片提供...
对于旧版浏览器IE6存在一些已知的BUG,解决方法包括但不限于:双边距BUG可以通过display属性解决,PNG透明问题可以使用JavaScript代码更改,min-height可以通过添加important声明解决,以及select在IE6下遮盖问题...
- Select在IE6下的遮盖问题:使用iframe嵌套。 - 宽度容器问题:使用`overflow: hidden`。 - **解决方法**:针对不同问题采取相应的解决方案。 #### 九、HTML的语义化 - **语义化**:使用合适的HTML标签来描述...
10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题、1px宽度容器问题等,通过各种CSS技巧或JavaScript解决。 11. **标签title与...
10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,超链接hover失效需调整顺序,z-index问题给父级设置position,PNG透明问题用js,min-height使用!important,select遮盖...
10. **IE6常见问题及解决方法**:包括双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题以及select遮盖问题等,这些问题通常需要针对IE6的特性进行特殊处理。 11. **img标签的...
- **select在IE6下的遮盖问题**:使用`iframe`嵌套可以解决。 - **无法定义1px宽度容器**:IE6默认的行高会导致1px宽度的问题,可以通过调整`overflow`属性来解决。 #### 十一、`<img>`标签上的`title`与`alt`属性 ...
10. **IE6常见BUG及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题,以及1像素宽度容器问题。 11. **title与alt属性**:`title`用于鼠标悬停...