`

IE6 Select元素无法被div等元素遮盖的的bug解决办法

    博客分类:
  • JAVA
阅读更多

在页面设计时,经常会使用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,当菜单项比较多的时候,这个脚本处理会导致菜单加载时有明显的延迟,所以这个菜单控件还是不用为妙!

分享到:
评论

相关推荐

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

    通过以上步骤,我们可以成功地使用`&lt;iframe&gt;`作为遮罩层,解决IE6下`&lt;select&gt;`无法被`&lt;div&gt;`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

    面试题库.docx

    10. **IE6 Bug解决方法**:双边距Bug、3像素问题、超链接hover失效、z-index问题、PNG透明、min-height、select遮盖等,需要针对性的CSS hack或JavaScript解决方案。 11. **title与alt属性**:`alt`属性为图片提供...

    BAT,WEB前段面试宝典

    对于旧版浏览器IE6存在一些已知的BUG,解决方法包括但不限于:双边距BUG可以通过display属性解决,PNG透明问题可以使用JavaScript代码更改,min-height可以通过添加important声明解决,以及select在IE6下遮盖问题...

    前端面试题大集合

    - Select在IE6下的遮盖问题:使用iframe嵌套。 - 宽度容器问题:使用`overflow: hidden`。 - **解决方法**:针对不同问题采取相应的解决方案。 #### 九、HTML的语义化 - **语义化**:使用合适的HTML标签来描述...

    最新史上最全前端面试题(含答案).docx

    10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题、1px宽度容器问题等,通过各种CSS技巧或JavaScript解决。 11. **标签title与...

    2016前端面试题及答案.pdf

    10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,超链接hover失效需调整顺序,z-index问题给父级设置position,PNG透明问题用js,min-height使用!important,select遮盖...

    史上最全前端面试题(含答案).docx

    10. **IE6常见问题及解决方法**:包括双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题以及select遮盖问题等,这些问题通常需要针对IE6的特性进行特殊处理。 11. **img标签的...

    超文标记语言

    - **select在IE6下的遮盖问题**:使用`iframe`嵌套可以解决。 - **无法定义1px宽度容器**:IE6默认的行高会导致1px宽度的问题,可以通过调整`overflow`属性来解决。 #### 十一、`&lt;img&gt;`标签上的`title`与`alt`属性 ...

    web前端面试题1

    10. **IE6常见BUG及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题,以及1像素宽度容器问题。 11. **title与alt属性**:`title`用于鼠标悬停...

Global site tag (gtag.js) - Google Analytics