ie6 select無(wú)法被div遮蓋的bug解決方法
發(fā)布時(shí)間：2011-07-29 17:24:54 作者：佚名 
我要評(píng)論
我要評(píng)論使用div制作蒙版或模擬彈出窗口，但在IE6下，當(dāng)div下方有下拉列表框select元素的時(shí)候，下拉列表框會(huì)劃破div顯示在div之上，不論z-index設(shè)為何值均會(huì)出現(xiàn)此問(wèn)題，可能由于下拉列表控件的彈出式下拉列表的原因?qū)е耑軸高度失控。但是IE6有一個(gè)神奇的邏輯，div 無(wú)法覆蓋sele
使用div制作蒙版或模擬彈出窗口，但在IE6下，當(dāng)div下方有下拉列表框select元素的時(shí)候，下拉列表框會(huì)劃破div顯示在div之上，不論z-index設(shè)為何值均會(huì)出現(xiàn)此問(wèn)題，可能由于下拉列表控件的彈出式下拉列表的原因?qū)е耑軸高度失控。但是IE6有一個(gè)神奇的邏輯，div 無(wú)法覆蓋select,但是iframe 可以覆蓋select，而div可以覆蓋iframe，所以解決辦法就是用Z軸高度更高的Iframe元素，包裹或覆蓋住下拉列表框控件，使其回到正常的Z軸高度上來(lái)！
html如下:
Html代碼
<div id="acontainnerbox" class="aboxinitcss">
這里是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
<div id="acontainnerbox" class="aboxinitcss">
這里是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
css代碼如下:
Html代碼
.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;
}
.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;
}
即可解決這個(gè)bug.
iframe的z-index一定要設(shè)置為負(fù)數(shù),不然遮蓋不住.
html如下:
Html代碼
復(fù)制代碼
代碼如下:<div id="acontainnerbox" class="aboxinitcss">
這里是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
復(fù)制代碼
代碼如下:<div id="acontainnerbox" class="aboxinitcss">
這里是很多代碼,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
css代碼如下:
Html代碼
復(fù)制代碼
代碼如下:.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;
}
.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;
}
即可解決這個(gè)bug.
iframe的z-index一定要設(shè)置為負(fù)數(shù),不然遮蓋不住.
相關(guān)文章
IE6下div層被select控件遮住的問(wèn)題解決方法
IE6下層被select控件遮住的問(wèn)題想必大家在布局過(guò)程中都有遇到過(guò)吧，其實(shí)解決方法很簡(jiǎn)單就是在層里套個(gè)iframe，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-19IE中div被視頻遮住(用embed來(lái)內(nèi)嵌視頻)的解決方法
使用embed來(lái)內(nèi)嵌視頻，因?yàn)橐曨l是windows media player，上面想用div浮動(dòng)一些內(nèi)容，最后設(shè)定了windowlessVideo=1終于解決，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-07- 浮層遮擋情況想必大家在測(cè)試網(wǎng)頁(yè)布局師會(huì)有遇到過(guò)吧，如果浮層中的元素覆蓋的區(qū)域含有設(shè)置了postion:relative的元素，在IE7中浮層就有可能無(wú)法遮擋這些元素，下面是具體的2013-05-07
- 今天有任務(wù)讓加個(gè)蒙版，JS小白的我在網(wǎng)上找了個(gè)修改下，改成了JS模版以后可以重復(fù)用啦,本文將詳細(xì)介紹DIV遮罩層如何實(shí)現(xiàn)，需要的 朋友可以參考下2012-11-20
巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼
巧用CSS3 border實(shí)現(xiàn)圖片遮罩效果代碼，需要的朋友可以參考下2012-04-09div背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果
背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)2011-12-08div背景半透明 覆蓋整個(gè)可視區(qū)域的遮罩層效果
背景半透明，覆蓋整個(gè)可視區(qū)域的遮罩層效果在工作中經(jīng)常會(huì)遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過(guò)一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過(guò)一個(gè)簡(jiǎn)單的例子看看如何實(shí)現(xiàn)2011-10-30利用js+css簡(jiǎn)單實(shí)現(xiàn)半透明遮罩彈窗
用到遮罩彈窗時(shí)在網(wǎng)上搜索，看到絕大多數(shù)都是基于Jquery的。我不想用那么復(fù)雜的應(yīng)用，于是自己寫(xiě)了一個(gè)。2011-07-27如何解決IE6/7絕對(duì)定位元素神秘消失或被遮擋的方法
在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)根據(jù)需要設(shè)置相對(duì)定位，絕對(duì)以及浮動(dòng)定位最近突然發(fā)現(xiàn)了一個(gè)奇妙的現(xiàn)象：IE6下絕對(duì)定位元素神秘消失或被遮擋, 首先是IE絕對(duì)定位元素神秘2011-07-22- css 遮罩樣式（支持IE和FireFox） ，需要的朋友可以參考下。2011-01-27