ie 两个bug(透明和absolute时,隐藏和显示子元素问题)

最新推荐文章于 2019-06-26 10:36:57 发布

iteye_19781

最新推荐文章于 2019-06-26 10:36:57 发布

阅读量143

点赞数

文章标签： IE 浏览器 XHTML HTML


<!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的情况下点击显示和隐藏,发现没截断的部分始终会显示,其余浏览器没有此问题
-->

网名 :  天堂左我往右