`
化蝶自在飞
  • 浏览: 2333363 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

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

    博客分类:
  • html
阅读更多
使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!

html如下:
<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=www.k686.com]www.k686.com[/url]	
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>


css代码如下:
.aboxinitcss{
	position:absolute;
	margin-top:0px;
	margin-left:0px;
	display:none;
	background:#FFF;
	border:solid #CCC 1px;
	padding:30px;
	z-index:9999;
	width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}


即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
分享到:
评论
8 楼 wangking717 2010-09-26  
iframe的width和height不好控制。。。
7 楼 dongguojun 2010-09-03  
为什么我看好多搞IT都把自己的头像换成美女啊 这是为什么啊??
6 楼 investigater 2010-05-13  
先disabled然后用div应该也能解决这个问题
5 楼 化蝶自在飞 2010-05-12  
zachary.guo 写道
化蝶自在飞 写道
从我自己网站上的cnzz统计来看,依然有高达58.39%的人在使用msie6 .震惊吧.

你自己的网站?指的是你的 javaeye blog 吗?cnzz 需要在自己的网页中加入一段 js 脚本才能进行统计,如果你说的网站是你的 javaeye blog 的话,你能加入脚本吗?或许我理解错了,再或者 javaeye 本身就支持 cnzz 统计?


额 ^ 之前我自己做网站的.我自己的网站.不是javaeye,呵呵,域名被和谐了就没咯,到javaeye来写博客啦.文章内容下面的广告是我自己的哦.点点,呵呵.
4 楼 zachary.guo 2010-05-12  
化蝶自在飞 写道
从我自己网站上的cnzz统计来看,依然有高达58.39%的人在使用msie6 .震惊吧.

你自己的网站?指的是你的 javaeye blog 吗?cnzz 需要在自己的网页中加入一段 js 脚本才能进行统计,如果你说的网站是你的 javaeye blog 的话,你能加入脚本吗?或许我理解错了,再或者 javaeye 本身就支持 cnzz 统计?
3 楼 化蝶自在飞 2010-05-12  
初级网民是不管你什么问题的.一切不和谐的问题都是你网站导致的,而他们根本不会意识到自己浏览器有问题.呵呵.
2 楼 化蝶自在飞 2010-05-12  
zachary.guo 写道
唉,不要解决了,就是让使用 ie6 的用户看不到 div。

要他们知难而退,升级吧,使用 ie6 的家伙们!

从我自己网站上的cnzz统计来看,依然有高达58.39%的人在使用msie6 .震惊吧.
1 楼 zachary.guo 2010-05-12  
唉,不要解决了,就是让使用 ie6 的用户看不到 div。

要他们知难而退,升级吧,使用 ie6 的家伙们!

相关推荐

    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轴)...

    BAT,WEB前段面试宝典

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

    面试题库.docx

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

    2016前端面试题及答案.pdf

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

    前端面试题大集合

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

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

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

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

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

    超文标记语言

    - **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