多数情况下隐藏(设置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模式)中会发现，子元素d2也能显示出了(别忘了，d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隐藏的。
重现代码
<!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>
分享到：
相关推荐
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
CSS中一些属性是可以继承的，比如`font-size`、`font-family`和`color`等，它们可以从父元素传递到子元素。不可继承的样式属性包括边框(`border`)、内边距(`padding`)、外边距(`margin`)、宽度(`width`)和高度(`...
- 清除浮动是为了避免父元素高度塌陷问题，即当子元素设置了浮动后，如果父元素没有明确的高度设置，则可能无法包含所有的浮动元素。 - 清除浮动的方式：使用`clear`属性、`overflow: auto`、伪元素`::after`配合`...
- 继承：子元素会继承父元素的一些样式，如字体、颜色，但像`display`和`position`这样的属性不继承。 3. **盒模型理解** - CSS盒模型分为两种：标准盒模型（width = content width）和IE盒模型（width = content...
7. **CSS定位方式**：CSS有两种定位方式，静态定位（static）和相对/绝对/固定定位（relative/absolute/fixed）。静态定位遵循正常的文档流，而相对定位相对于其正常位置偏移，绝对定位相对于最近的非静态定位祖先...