ie margin top失效当前一个节点display为absolute
在IE浏览器下面，某个节点设置了margin-top和height属性时，如果此节点的上一个兄弟节点的display为absolute，这个节点的margin-top会失效。去掉这个节点的height属性后，margin-top又起作用了。
解决办法
1）将绝对定位的节点放到所有兄弟节点的最后，这样在display为absolute前面设置过height的兄弟节点的margin-top就不会失效了。
2）给display为absolute的节点再添加一个父节点，不设置样式即可
3）去掉节点的height属性，不推荐。不设置height就不出现这个bug了，呵呵。。
测试代码如下，用IE8-浏览器查看，其他非IE核心浏览器不会出现此问题。IE9+浏览器没有，不知道是否会存在这个bug
<script type="text/javascript">
window.onload=function(){
var dvForm=document.getElementById('dvForm')
window.onscroll=function(){
var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop)
,scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
dvForm.style.top=(top>=dvForm.offsetHeight?scrollHeight-dvForm.offsetHeight:0)+'px';
}
}
</script>
<style type="text/css">
body,form{margin:0px;top:0px;}
#dvForm{position:absolute;left:0px;top:0px;background:#fff;}
.content{height:1000px;background:#eee;margin:50px 0px 50px 0px;display:block}
</style>
<div>
<div id="dvForm"><form onsubmit="return setDisabled(this)">
<textarea cols="50" rows="1" name="content"></textarea>
</form>
</div>
</div>
<div class="content">内容容器，注意要设置margin-top>=表单容器的高，页脚设置margin-bottom>=表单容器的高，防止内容重叠</div>
运效果如下，设置了margin-top和height属性内容和display为absolute的重叠了
更改结构后可以实现想要的效果如下
1）将绝对定位的节点放到所有兄弟节点的最后，这样在display为absolute前面设置过height的兄弟节点的margin-top就不会失效了。
<script type="text/javascript">
window.onload=function(){
var dvForm=document.getElementById('dvForm')
window.onscroll=function(){
var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop)
,scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
dvForm.style.top=(top>=dvForm.offsetHeight?scrollHeight-dvForm.offsetHeight:0)+'px';
}
}
</script>
<style type="text/css">
body,form{margin:0px;top:0px;}
#dvForm{position:absolute;left:0px;top:0px;background:#fff;}
.content{height:1000px;background:#eee;margin:50px 0px 50px 0px;display:block}
</style>
<div class="content">内容容器，注意要设置margin-top>=表单容器的高，页脚设置margin-bottom>=表单容器的高，防止内容重叠</div>
<div id="dvForm"><form onsubmit="return setDisabled(this)">
<textarea cols="50" rows="1" name="content"></textarea>
</form>
</div>
2）给display为absolute的节点再添加一个父节点，不设置样式即可
<script type="text/javascript">
window.onload=function(){
var dvForm=document.getElementById('dvForm')
window.onscroll=function(){
var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop)
,scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
dvForm.style.top=(top>=dvForm.offsetHeight?scrollHeight-dvForm.offsetHeight:0)+'px';
}
}
</script>
<style type="text/css">
body,form{margin:0px;top:0px;}
#dvForm{position:absolute;left:0px;top:0px;background:#fff;}
.content{height:1000px;background:#eee;margin:50px 0px 50px 0px;display:block}
</style>
<div><div id="dvForm"><form onsubmit="return setDisabled(this)">
<textarea cols="50" rows="1" name="content"></textarea>
</form>
</div></div>
<div class="content">内容容器，注意要设置margin-top>=表单容器的高，页脚设置margin-bottom>=表单容器的高，防止内容重叠</div>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：ie margin top失效当前一个节点display为absolute