body下div的margin-bottom在ff、ie下失效

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 {
            position: fixed;
            left: 0;top:0;bottom:0;right: auto;
            width: 100px;
            height: 100%;
        }
        #div2 {
            position: absolute;
            left: 200px;
            width: 500px;
            height: 1200px;
            margin: 30px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

实际效果在ff、ie下div2的底边贴着body的底边，没有30px的margin，但是chrome下正常，是为什么？

有没有css reset

刚测试了一下的确如你所说，但我觉得这是你代码的锅，你这里#div2用的是绝对定位，所以实际上是脱离文本流了，使用margin意义不大，既然你用了其实也无妨，但是没有指定#div2距离底部的大小，他的height又远大于浏览器窗口的大小，所以我猜测在chrome中将视图的高度定位1200px+60px，而在ff中却忽略掉底部的margin，你改成如下代码可以再试试

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 {
            position: fixed;
            left: 0;top:0;bottom:0;right: auto;
            width: 100px;
            /* height: 100%; */
          border:1px solid;
        }
        #div2 {
            position: absolute;
            left: 200px;
            width: 500px;
            height: 1200px;
            margin: 30px;
           bottom:0;
          border:1px solid;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

ps: 你的height：100%指定了并没有啥用

【热门文章】