大家来看看这个div有border与无border为什么会有这么大的差异啊？

本帖最后由 mengbmw 于 2010-05-15 20:56:44 编辑

解决方案 »

  1.   

    这是在Chrome下测试的，在FF下也这样，只有IE有没有Border都是一样的效果。
      

  2.   

    楼主按你的测试了下，没发现问题。正常的。ff3.64，IE6，ie7,ie8，Opera没差异
      

  3.   

    是因为 margin:0px; 的不同一起的吧
      

  4.   

    我晕 一个是margin:0;一个是 margin:20px当然有差距的
      

  5.   

    文档类型,
    顶部加上
    <!doctype html>试试
      

  6.   

    不好意思代码发错了误导大家了，两个都是margin:20px,它们代码唯一的差异就是一个有border:blue 1px solid;一个没有，然后效果就是我截图的那种效果。
      

  7.   

    我用ff3.6.4测试的结果：
    有border:<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    </head><body>
    <div style="border:blue 1px solid;background:blue;margin-top:0px;height:100px;">
      <div style="background:red;height:30px;margin:20px;">   
      </div>   
      </div>
    </body>
    </html>
    没有border:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    </head><body>
    <div style="background:blue;margin-top:0px;height:100px;">
      <div style="background:red;height:30px;margin:20px;">   
      </div>   
      </div>
    </body>
    </html>
      

  8.   

    很正常，属于margin的叠加问题
      

  9.   

    CSS的margin边界叠加问题
    解决方案有6种
    http://blog.myspace.cn/e/400477677.htm<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    </head><body>
    <div style="background:blue;margin-top:0px;height:100px;overflow:hidden">
      <div style="background:red;height:30px;margin:20px;">   
      </div>   
      </div>
    </body>
    </html>
    个人认为最好的解决方案啊是↑
      

  10.   

    以前只知道垂直的两个div会边界叠加，没想到嵌套的div都会叠加
    谢谢大家 总算搞清楚这个问题了