IE6/7 and IE8/9/10(IE7模式)依次隱藏具有absolute或relative的父元素和子元素后再顯示父元素
更新時間：2011年07月31日 22:36:26 作者：
多數(shù)情況下隱藏(設置display:none)一個元素，無需依次將其內的所有子元素都隱藏。非要這么做，有時會碰到意想不到的bug。
如下
1，兩個div，d1中包含d2
2，d1，d2都設置了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都設置了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>
您可能感興趣的文章:
- jsp 文件上傳瀏覽，支持ie6，ie7，ie8
- JS控制顯示隱藏兼容問題(IE6、IE7、IE8)
- js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]
- IE6,IE7,IE8下使用Javascript記錄光標選中范圍（已補全）
- 本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結
- 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問題
相關文章
這篇文章主要介紹了微信小程序封裝多張圖片上傳api代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關資料,需要的朋友可以參考下2015-11-11
javascript的函數(shù)、創(chuàng)建對象、封裝、屬性和方法、繼承
從一開始接觸到js就感覺好靈活，每個人的寫法都不一樣，比如一個function就有N種寫法2011-03-03
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)京東查看商品點擊放大，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
uni-app??是一個使用??Vue.js開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關于利用uniapp開發(fā)APP時的調試/安卓打包等的相關資料,需要的朋友可以參考下2022-12-12
原型鏈是一種關系，實例對象和原型對象之間的關系,關系是通過原型(__proto__)來聯(lián)系的,下面這篇文章主要給大家介紹了關于Js繼承與原型鏈的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
javascript消除window.close()的提示窗口
有人問起，怎么去掉js調用window.close()時怎么去掉那可惡的提示，咋一看好像還真不好弄，IE的安全機制好像就不允許通過腳本關閉本頁面，但是IE好像可以允許js關閉彈出窗口，那我們是不是可以通過一定的技巧欺騙一下IE，繞過去呢。鼓搗了幾下，似乎還真可以做到2015-05-05
我就是想怎么獲取 每個層 相對于父級層 是第幾個，需要的朋友可以參考下。2011-01-01
本文將對在網(wǎng)頁中引用js常會出現(xiàn)的問題進行匯總，并提出解決問題的具體方案，有助于我們更好的學習和使用js，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細介紹了TypeScript的類型注解，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03