IE6下绝对定位BUG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>N!</title>
		<style>
			.cover{
				background-color:#0ff;
				height:auto!important;
				min-height:65px;
				_height:65px;
				position:relative;
				width:200px;
			}
			.containImg{
				height:200px;
				position:relative;
				width:200px;
			}
			.noImage{
				height:65px;
				position:relative;
				width:200px;
			}
			.PersonImg{
				background-color:#f00;
				height:50px;
				position:absolute;
				left:25px;
				bottom:-25px;
				width:50px;
			}
			.btn{
				margin-left:150px;
			}
			.hide{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="cover" class="cover">
			<div class="containImg" id="containImg">height:200px;(高度同父元素)</div>
			<div class="noImage hide" id="noImage">height:65px;</div>
			<div class="PersonImg" id="PersonImg">absolut</div>
			<input class="btn" id="btn" type="button" value="提交"/>
		</div>
		<script type="text/javascript">
			var btn = document.getElementById('btn');
			var containImg = document.getElementById('containImg');
			var noImage = document.getElementById('noImage');
			var PersonImg = document.getElementById('PersonImg');
			btn.onclick = function(){
				containImg.className = 'containImg hide';
				noImage.className = 'noImage';
			}
		</script>
	</body>
</html>

上面这段代码在其他浏览器时点提交显示效果为：

在IE6浏览器上点提交显示效果为：

这个bug的解决方法就是需要重置bottom值；

在click事件中加入代码：

				PersonImg.style.bottom = PersonImg.currentStyle['bottom'];

完整的可运行代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>N!</title>
		<style>
			.cover{
				background-color:#0ff;
				height:auto!important;
				min-height:65px;
				_height:65px;
				position:relative;
				width:200px;
			}
			.containImg{
				height:200px;
				position:relative;
				width:200px;
			}
			.noImage{
				height:65px;
				position:relative;
				width:200px;
			}
			.PersonImg{
				background-color:#f00;
				height:50px;
				position:absolute;
				left:25px;
				bottom:-25px;
				width:50px;
			}
			.btn{
				margin-left:150px;
			}
			.hide{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="cover" class="cover">
			<div class="containImg" id="containImg"></div>
			<div class="noImage hide" id="noImage"></div>
			<div class="PersonImg" id="PersonImg"></div>
			<input class="btn" id="btn" type="button" value="提交"/>
		</div>
		<script type="text/javascript">
			var btn = document.getElementById('btn');
			var containImg = document.getElementById('containImg');
			var noImage = document.getElementById('noImage');
			var PersonImg = document.getElementById('PersonImg');
			btn.onclick = function(){
				containImg.className = 'containImg hide';
				noImage.className = 'noImage';
				PersonImg.style.bottom = PersonImg.currentStyle['bottom'];
			}
		</script>
	</body>
</html>

这个bug还是别人帮忙解决的

posted on 2012-05-28 17:36 小落落阅读(263) 评论(0) 收藏举报