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