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)文章
在開發(fā)項目中多次遇到前臺js對象在后臺轉(zhuǎn)化java對象的問題，下面就為大家介紹下前臺js對象轉(zhuǎn)后臺java對象，感興趣的朋友可以了解下2013-12-12
為Javascript中的String對象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對象添加去除左右空格的方法(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
javascript 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-12
javascript適配器模式和組合模式原理與實現(xiàn)方法詳解
這篇文章主要介紹了javascript適配器模式和組合模式原理與實現(xiàn)方法,結(jié)合實例形式詳細(xì)分析了javascript適配器模式與組合模式相關(guān)原理、功能、實現(xiàn)方法與注意事項,需要的朋友可以參考下2023-07-07
JS函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JS實現(xiàn)字符串去重及數(shù)組去重的方法示例
這篇文章主要介紹了JS實現(xiàn)字符串去重及數(shù)組去重的方法,涉及javascript針對字符串與數(shù)組的遍歷、判斷、刪除、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了前端組件化基礎(chǔ)知識，我們一起來學(xué)習(xí)前端組件化的知識，組件化在前端架構(gòu)里面是最重要的部分，了解什么是組件化和一個組件的基本組成部分開始2021-04-04
javascript中this做事件參數(shù)相關(guān)問題解答
有關(guān)this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來為大家介紹下this做事件參數(shù)問題，感興趣的你可不要錯過了哈2013-03-03
sort是數(shù)組的一個排序方法。學(xué)習(xí)js的朋友可以參考下。2011-07-07