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还是别人帮忙解决的
