IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示父元素
更新時間:2011年07月31日 22:36:26 作者:
多數(shù)情況下隱藏(設(shè)置display:none)一個元素,無需依次將其內(nèi)的所有子元素都隱藏。非要這么做,有時會碰到意想不到的bug。
如下
1,兩個div,d1中包含d2
2,d1,d2都設(shè)置了absolute或relative
3,隱藏d1
4,隱藏子元素d2
5,顯示d1
這時IE6/7 and IE8/9/10(IE7模式)中會發(fā)現(xiàn),子元素d2也能顯示出了(別忘了,d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隱藏的。
重現(xiàn)代碼
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示父元素,子元素依然能顯示bug</title>
</HEAD>
<BODY>
<p>
<button onclick="hidden_d1()">1) 隱藏div[id=d1]</button>
<button onclick="hidden_d2()">2) 隱藏div[id=d2]</button>
<button onclick="display_d1()">3) 顯示div[id=d1]</button>
</p>
<div id="d1" style="position:absolute;width:200px;height:200px;border:1px solid gray;">
<div id="d2" style="position:absolute;width:100px;height:100px;background:gold;"></div>
</div>
<script>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
function hidden_d1() {
d1.style.display = "none";
}
function hidden_d2() {
d2.style.display = "none";
}
function display_d1() {
d1.style.display = "block";
}
</script>
</BODY>
</HTML>
1,兩個div,d1中包含d2
2,d1,d2都設(shè)置了absolute或relative
3,隱藏d1
4,隱藏子元素d2
5,顯示d1
這時IE6/7 and IE8/9/10(IE7模式)中會發(fā)現(xiàn),子元素d2也能顯示出了(別忘了,d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隱藏的。
重現(xiàn)代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示父元素,子元素依然能顯示bug</title>
</HEAD>
<BODY>
<p>
<button onclick="hidden_d1()">1) 隱藏div[id=d1]</button>
<button onclick="hidden_d2()">2) 隱藏div[id=d2]</button>
<button onclick="display_d1()">3) 顯示div[id=d1]</button>
</p>
<div id="d1" style="position:absolute;width:200px;height:200px;border:1px solid gray;">
<div id="d2" style="position:absolute;width:100px;height:100px;background:gold;"></div>
</div>
<script>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
function hidden_d1() {
d1.style.display = "none";
}
function hidden_d2() {
d2.style.display = "none";
}
function display_d1() {
d1.style.display = "block";
}
</script>
</BODY>
</HTML>
您可能感興趣的文章:
- jsp 文件上傳瀏覽,支持ie6,ie7,ie8
- JS控制顯示隱藏兼容問題(IE6、IE7、IE8)
- js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]
- IE6,IE7,IE8下使用Javascript記錄光標(biāo)選中范圍(已補全)
- 本地圖片預(yù)覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結(jié)
- JS代碼判斷IE6,IE7,IE8,IE9的函數(shù)代碼
- 解決window.opener=null;window.close(),只支持IE6不支持IE7,IE8的問題
- ie6,ie7,ie8完美支持position:fixed的終極解決方案
- IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
- IE7瀏覽器窗口大小改變事件執(zhí)行多次bug及IE6/IE7/IE8下resize問題
相關(guān)文章
為Javascript中的String對象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對象添加去除左右空格的方法(示例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11javascript Slip.js實現(xiàn)整屏滑動的手機網(wǎng)頁
Slip.js能做什么?Slip.js可以讓你的手機網(wǎng)站像原生手機軟件一樣慣性滾動,手觸圖片輪換等等,對Slip.js感興趣的小伙伴們可以參考一下2015-11-11基于JavaScript操作DOM常用的API小結(jié)
DOM(Document Object Model)即文檔對象模型,針對 HTML 和 XML 文檔的 API(應(yīng)用程序接口)。本篇文章給大家介紹javascript操作dom常用的api小結(jié),對javascript dom api相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12javascript適配器模式和組合模式原理與實現(xiàn)方法詳解
這篇文章主要介紹了javascript適配器模式和組合模式原理與實現(xiàn)方法,結(jié)合實例形式詳細(xì)分析了javascript適配器模式與組合模式相關(guān)原理、功能、實現(xiàn)方法與注意事項,需要的朋友可以參考下2023-07-07JS函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JS實現(xiàn)字符串去重及數(shù)組去重的方法示例
這篇文章主要介紹了JS實現(xiàn)字符串去重及數(shù)組去重的方法,涉及javascript針對字符串與數(shù)組的遍歷、判斷、刪除、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04javascript中this做事件參數(shù)相關(guān)問題解答
有關(guān)this想必大家早有所耳聞,只不過在使用中不是那么在意而已,接下來為大家介紹下this做事件參數(shù)問題,感興趣的你可不要錯過了哈2013-03-03