多数情况下隐藏(设置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`属性。 通常，...
第二步：子容器定位设置为 absolute（绝对定位）。 我要浮出去！</div> </div> #a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相对定位*/ } #b{ width: 150px; ...
8. **边距重叠问题**：当浮动元素的子元素有外边距时，IE6会出现边距重叠现象，可以使用`display:inline-block`或`float:left`来避免。 9. **CSS3属性兼容**：IE8及以下版本对CSS3新特性支持有限，如圆角、阴影、...
1. 对于IE6和IE7，我们可以使用`<a>`元素包裹整个`<li>`，然后使用`:hover`伪类： ```css .dropdown a:hover + ul, .dropdown a:hover > ul { visibility: visible; opacity: 1; } ``` 2. IE6不支持透明度，所以...
在网页设计中，实现元素的垂直居中布局一直是一个常见的挑战，尤其是在需要兼容不同浏览器，尤其是老版本的 Internet Explorer（如 IE6、IE8）时。"垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF"这个主题...
在Vue.js应用中，我们经常会遇到这样的需求：子元素具有滚动功能，而父元素保持静止，不随子元素滚动。这种布局模式在各种界面设计中都很常见，特别是在需要固定顶部导航或者侧边栏的时候。在PC和移动端，由于设备...
本话题主要探讨如何在IE7及以上的浏览器中实现元素的垂直居中效果。 在IE7+中实现垂直居中，我们可以采用多种方法，每种方法都有其适用场景和优缺点。以下是一些常见的技术： 1. **CSS Table布局**： - 设置父...
### CSS的下拉菜单，支持IE6 IE7 Firefox #### 概述 本文将详细介绍一个兼容Internet Explorer 6（IE6）、Internet Explorer 7（IE7）以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器...
5. 定位（Positioning）：IE6对绝对定位（absolute positioning）和相对定位（relative positioning）的支持有限，可能会导致元素位置偏移。使用`position: fixed;`在IE6中无效，需要使用技巧如`expression`脚本或...
本文将详细讲解如何实现一个实用的右下角弹出菜单，该菜单兼容Firefox、Internet Explorer 6 (IE6) 和 Internet Explorer 7 (IE7) 浏览器，并具有自定义关闭和自动消失功能。 首先，让我们了解弹出菜单的基本构建。...
`position:absolute`在IE6下可能无法正常工作，需要使用`position:relative`和`left/top`配合，或者使用`position:static`和`margin`调整。 8. **层叠上下文** IE6对层叠上下文的理解不同于其他浏览器，可能导致z...
- **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...
- **IE6的定位问题**：IE6对于`position: absolute`或`position: relative`的元素位置计算有误。 - **解决方法**： - 直接设置`.line-height`等于当前div的高度，并通过`vertical-align: middle`来居中显示。 - ...
在互联网的早期，浏览器兼容性问题一直是开发者头疼的问题，尤其是对于IE6、IE7和IE8这些较老的版本。本文将深入探讨如何实现一个兼容这些老版本IE以及Firefox的本地图片上传预览功能。 首先，我们需要理解浏览器...
2. **定位（positioning）**：通常使用`relative`、`absolute`或`fixed`定位来控制菜单项的位置，使其能够在鼠标悬停时正确地显示或隐藏。 3. `display`属性：切换菜单项的可见性，通常使用`none`（隐藏）和`block`...
"PIE_IE678_uncompressed.js" 和 "PIE_IE9_uncompressed.js" 分别是针对IE6、7、8的未压缩版本的JavaScript文件，而"PIE_IE9.js"则是针对IE9的。未压缩版本通常用于开发和调试，因为它们包含了完整的代码和易于阅读...
在网页设计中，"垂直居中ie8+"是一个常见的需求，指的是在Internet Explorer 8及更高版本的浏览器中实现元素的垂直居中对齐。在IE8+支持CSS的多种方法，使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们...
在网页开发过程中，尤其是针对老版本的Internet Explorer（如IE6和IE7）时，开发者可能会遇到一个棘手的问题：绝对定位元素在这些浏览器中神秘消失或者被其他元素遮挡。这个问题主要涉及到浏览器的渲染差异，特别是...
但当我们将`position`设置为`relative`或`absolute`时，元素的定位模式会发生变化。 1. **相对定位（relative）：** 当`position`设为`relative`时，元素保持其在正常文档流中的位置，但我们可以使用`top`、`...