0

我的网站上有这样一个 DOM：

<html>
    <body>
        <div id='topbar'/>
        <div id='centerframe'/>
    </body>
</html>

使用CSS规则：

html
{
    margin:0;
    padding:0;
}

body
{

    background:url('/images/brickwall.jpg'); background-size: 10%;
    width:100%; 
    height:100%;
    margin:0;
    padding-top:0;
}

div#centerframe
{

    background:rgba(255, 255, 255, 0.85);
    box-shadow:0em 0.5em 2em 0.3em;
    padding:90px;
    margin-left:        180px;
    margin-right:       160px;  
    margin-top:         200px; /* this also causes body to slide down 200px , when body{padding-top:0} . why ? */

}

#topbar
{
    position:fixed;
    display:block;
    float:left;
    width:100%;
    height:80px;
    top:0;
    margin-top:0%;
    background:rgba(0,0,0,1);
}

这个 css 导致了这样一个问题：body 在顶部有一个边距，即使我告诉它margin:0;这是屏幕帽： 问题

但是当我更改 css 并制作body{padding-top: 1px;}（而不是 0）时，它可以正常工作。查看屏幕截图： 普通的

当我添加此规则时它也有效：#centerframe{float:left;}但它会导致其他问题，例如扩展到超过 100% 的宽度。

无论如何，所以我用 1px 填充解决了这个问题。但为什么一开始就存在问题呢？

如何<body/>更改其上边距的孩子？

谢谢 ！

4

2 回答 2

3

由于浏览器如何处理包括您显示的图像在内的后续元素，您的问题是由边距崩溃引起的。这可以通过您添加填充来证明，但我尚未对此进行测试。

请注意，在您的示例中，<div />这是无效的。Divs 不会自动关闭。

于 2013-06-23T12:31:16.730 回答
0

我未能在 jsFiddle 中重新创建这种行为，所以我不能具体说明它。不知道是不是浏览器的问题？

你的身体肯定没有边距，因为顶栏总是在最顶部，所以这就是你的身体开始的地方。也许只是背景被取代了（出于某种尴尬的原因）。你玩过背景位置属性吗？

于 2013-06-23T12:14:19.073 回答