0

我想要实现的事情很简单

  • 就在顶部一个固定位置的元素，在向下滚动文档时不会移动。
  • 之后是 div#content 在窗口的顶部边缘和中心有一些边距顶部。

所以代码是： 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.header-container 和 div#conetent 之间放置一个 div.clear(clear:both) 时，一切正常；

  • 或者我按照hasLayout引起的其他问题的解决方案，然后取出div#content的宽度和高度，东西还可以，但是这样我需要再放一个div#inner-content在 div#content 中，并为其设置宽度和高度以查看结果。

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

所以实际上你能帮我解决这个问题吗，有没有其他解决方案可以解决这个问题，并向我解释这个有线的东西？

还是非常感谢。

4

1 回答 1

0

一旦我摆脱了最后一个margin-top属性，它对我来说很好。你知道你已经设置了两次吗？一次与margin他们再次与margin-top。如果您只编辑margin第一个值，它将不起作用，因为最后一个值将覆盖第一个值。

于 2013-04-20T08:03:44.233 回答