Question

我想要实现的目标非常简单

在顶部一个固定的位置元素，滚动时不移动下来的文件。
之后是div＃内容从顶部边缘有一些边缘顶部并在窗口中央。

所以代码是：的 HTML

<div class='head-container' id="headerCom">
    <header id="a"></header>
</div>
<div id="content" role="main"></div>

CSS

 * {
        margin: 0;
        padding: 0
    }
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .head-container {
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height: 100px;
        background: red;
        _position:absolute; // make the ie6 support the fixed position
        _top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
    }
    header {
        display: block;
        width: 960px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        zoom: 1;
        background: blue;
    }
    #content {
        border: 1px solid black;
        margin: 130px auto 0 auto;
        width: 960px;
        height: 1000px;
        background: #999;
        margin-top: 150px;
    }

所有现代浏览器都支持得很好，但是ie（ie7，ie8，ie10）不能正常工作，就像它忽略了我设置为div＃content的margin-top;

到目前为止，我已经检查了stackoverflow上的另一个问题，我尝试了几乎可以。我很可能。

当我将div＃content的margin-top更改为padding-top时，一切正常。
：当我把div.clear（明确：两者）在div.header-容器和DIV＃conetent之间，这个事情变好;
或者我遵循由 hasLayout 引起的其他问题解决方案，然后取出div＃内容的宽度和高度，事情也没关系，但在此方式，我需要在div＃content中添加另一个div＃inner-content，并设置宽度和高度以查看结果。

所以我对hasLayout很困惑，我不太确定我完全理解它是什么，并且不太确定我的代码中发生了什么。

所以实际上你能帮我解决这个问题，有没有其他解决办法可以解决这个问题，并向我解释这些有线的事情？

无论如何，谢谢你。

Answer 1

一旦我摆脱了最后的margin-top属性，它对我来说很好。你知道你把它放了两次吗？一次使用margin，再次使用margin-top。如果仅编辑margin的第一个值，它将无效，因为最后一个将覆盖第一个值。

位置：固定原因保证金顶部消失？

1 个答案: