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