<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<style>
html,body{
height:100%;
width :100%;
}
#wrapper{
border:1px solid red;
filter:alpha(opacity=80);
position:absolute;
width:1000px;
height:300px;
/* height:1000px; */
}
#wrapper div{
background:transparent url(test.gif);
width:100px;
height:100px;
border:1px solid red;
position:absolute;
cursor:pointer;
}
</style>
<script>
function hiddenD(){
var divs = document.getElementById("wrapper").getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
}
function showD(){
var divs = document.getElementById("wrapper").getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].style.display="";
}
}
function hiddenW(){
document.getElementById("wrapper").style.display = "none";
}
function showW(){
document.getElementById("wrapper").style.display = "";
}
</script>
</head>
<body>
<input type="button" value="隐藏wrapper" onclick="hiddenW()">
<input type="button" value="显示wrapper" onclick="showW()">
<input type="button" value="隐藏" onclick="hiddenD()">
<input type="button" value="显示" onclick="showD()">
<div id="wrapper">
<div style="top:0px"></div>
<div style="top:100px"></div>
<div style="top:200px"></div>
<div style="top:300px"></div>
<div style="top:400px"></div>
</div>
</body>
</html>
<!--
ie6和ie7类似
filter:alpha(opacity=80);时,会导致超出wrapper的部分被截断,
隐藏wrapper,再隐藏wrapper里面的div, 然后显示wrapper,发现里面的div没有隐藏,这时候再点隐藏,失效了
ie8不会截断,不隐藏wrapper的情况下点击显示和隐藏,发现没截断的部分始终会显示,其余浏览器没有此问题
-->
网名 : 天堂左我往右
分享到：
相关推荐
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
关键的CSS选择器如`ul#navmenu li:hover ul`和`ul#navmenu li.iehover ul`用于在鼠标悬停在父菜单项上时显示子菜单。此外，还定义了不同级别的菜单项在鼠标悬停时的背景颜色和文本颜色，以实现视觉反馈。 总结来说...
然而，当与其他CSS规则结合使用，比如绝对定位（absolute）或者相对其他定位元素时，这种隐藏的偏移可能引发问题，如在案例中提到的标题栏无法点击和拖动。 为了避免这类问题，应该谨慎使用全局的`position: ...
在IE6中，浮动元素的外边距会被解释为两倍。解决方法是在浮动元素上添加`display:inline`，这可以消除额外的边距。 3. **FF下文本无法撑开容器高度** 标准浏览器（如Firefox）中，固定高度的容器不会像IE6那样被...
3. 子元素会继承父元素的`z-index`，但若子元素设置了绝对定位和`z-index`，它可以突破父元素的限制，根据自身`z-index`值进行显示。 例如，以下代码展示了在三个相邻的相对定位层中，一个内部绝对定位元素无法正常...
在上述代码中，通过为两个父级div添加了z-index值，无论值为多少，只要确保子元素的z-index在各自的父级堆叠上下文中是正确设置的，就可确保red元素覆盖black元素。 针对IE7浏览器的这些兼容性问题，在开发中需要...
前端开发面试题整合（CSS、JS、Vue、React 等） 本文将详细解释前端开发面试中常见的 CSS...* 上下 margin 重合问题，相邻的两个 div margin-left margin-right 不会重合，但相邻的 margin-top margin-bottom 会重合。
9. 兄弟元素与子元素的定位：在使用定位方式时，需要考虑兄弟元素和子元素的定位策略，确保它们能够正确地相互定位。比如，在一个具有relative定位的父元素中，其绝对定位的子元素会相对于父元素计算偏移。 10. ...
- **答案**: 这是IE6的一个bug，可以通过添加额外的负margin或使用CSS hack来解决。 **38. HTML与XHTML的区别** - **问题**: HTML与XHTML——二者有什么区别？ - **答案**: - **XHTML**遵循XML规则，要求所有的...
- `opacity` 应用于整个元素，包括其子元素，而 rgba 的透明效果只影响该元素本身。 **25. CSS 中可以让文字在垂直和水平方向上重叠的两个属性是什么？** - `text-align` 和 `vertical-align` 可以用来调整文本的...
- 当两个相邻的块级元素的外边距发生重叠时，实际应用的外边距为两者中的最大值。 - 解决方案：通过设置 `clear:both;` 或使用负 `margin` 来避免重叠。 **24. rgba()和opacity的透明效果差异** - **rgba()**：可以...
还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不...
- `opacity`：设置元素及其子元素的整体透明度。 **27、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？** - `vertical-align`：垂直对齐。 - `text-align`：水平对齐。 **28、如何垂直居中一个浮动...
- **opacity**：对元素及其所有子元素设置透明度。 ##### 25. 文字垂直和水平方向重叠的 CSS 属性 - `vertical-align`：用于垂直对齐。 - `text-indent` 或者 `transform`：用于水平方向的位移。 ##### 26. 垂直...
当元素的hasLayout值为true时，元素会拥有布局，负责对自身及其子元素进行尺寸计算和定位。 默认情况下，某些元素如body和html、表格相关标签、img、input等，拥有布局，即hasLayout为true。但并非所有元素默认都...