css外边距叠加问题

0 0

css外边距叠加问题5

项目开发阶段没有注意这个问题，昨天对页面进行调优过程中突然发现页面html与body之间出现了Xpx像素点的间隙，分别在Chroe、FF、IE8中都出现了，但是在IE7中确奇怪的消失了。

不是前端出身所以对CSS布局问题知之甚少，于是翻书查资料才在书中找到出现上述情况的原因是浏览器bug---外边距叠加问题。

外边距叠加的出现我都不解释了书上、网上资料到处都是。但是对于其出bug真想一探究竟。希望iteye的大牛能给予帮助。说了这么多对问题的描述还没来呢？抱歉！

问题描述：先把代码列上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>marginOverlay.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
       body{
         margin: 0px;
         /*border: 1px solid white;*/
       }
       .parent{
          margin:10px;
          border: 1px solid white;
       }
       .children{
          margin-bottom: 10px;
          margin-top: 10px;
          background-color: red;
       }
    </style>
  </head>
  <body>
    <div class="parent">
        <div class="children">
             	消除外边距叠加
        </div>
    </div>
  </body>
</html>

加粗的样式

body{
         margin: 0px;
         /*border: 1px solid white;*/
       }

如果注释就去掉了body与html就出现了间隙，通过FireBug可以查看到造成该原因是因为div.parent的外边距 10px造成的。为何出现这种原因呢？希望能帮助知道，推荐资料阅读我自己查看也行。

注：在IE的hasLayout属性中查查到 body的该属性为true。IE中调试div.parent截图如图1：ie.gif

在FF中调试div.parent截图如图2：ff.gif

问题补充：如何消除body与html之间的间隙，避免因body子元素设置margin出现间隙。谢谢！

HTML CSS

2013年7月05日 10:50

javatozhang
11
0 0 5

查看图片附件

1个答案按时间排序按投票排序

0 0

2013年7月16日 11:31

shenwa12
94
0 0 4

1条评论

已解决问题

未解决问题

排行榜

查看全部排名>>