IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

如下
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>

赞 (0)

相关推荐

  • jsp 文件上传浏览，支持ie6，ie7，ie8

    找了好久终于找到一个jsp上能用的-- 分享!! 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> &l

  • 本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

    最近在Web项目开发过程中遇到的本地图片预览的需求,虽然最后因为其他原因没能使用,但是也算有些了解,整理出来. 这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究. 总结一下就是: IE6下可以直接从file的value获取图片路径来显示预览. IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览. FireFox下调用file的getAsDataURL方法获取Data URI数

  • IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

    本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题:分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文. var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("alert('mm')",

  • IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）

    刚和同事讨论了一个很有趣的问题,有个idea,需要记录用户在页面选中的内容,在ff和ie9下有w3c的dom2级事件createRange,这里不再累赘.主要问题是在IE6,7,8只能通过createTextRange选中热区.假如我们知道用户选择开始元素和偏移量,以及结束元素以及偏移量,那么我们可以用下面的例子把用户选择的内容用js给标记起来 复制代码 代码如下: <head> <script> function mark() { var b= document.getEleme

  • 解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

    window.opener=null;window.close(),只支持IE6不支持IE7的问题 打开新窗口并且关闭本窗口不弹出要关闭窗口前的提示function openWin(){window.open('login.jsp','','fullscreen=yes,menubar=no,resizable=no');window.opener=null;window.close();} 在IE7下为 function openWin(){ window.opener=null;window

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    在IE7中, 使用jQuery 显示:$("#a").attr("style",""); 隐藏:$("#a").attr("style","display:none"); 但是显示这个方法在IE8中不行 IE8 显示:$("#a").removeAttr("style"); 隐藏:$("#a").attr("style

  • JS代码判断IE6,IE7,IE8,IE9的函数代码

    做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代码! 第一种: 复制代码 代码如下: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=versi

  • js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    <iframe id= "myframe" ></iframe> W3C的标准告诉我们,可以通过Dom对象的contentDocument属性来返回文档对象. 即 复制代码 代码如下: doc= document.getElementById('myframe' ).contentDocument 但对IE浏览器来说,经过测试,IE6,IE7都不支持,IE8开始支持了. 在IE下,需要这样来访问 复制代码 代码如下: document.frames['myfra

  • ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁. 复制代码 代码如下: <div id="goTop_div" class="fixed ie">  </div> css: 复制代码 代码如下: .fixed{         positio

随机推荐