IE7位置:固定和margin-top问题

Question

我目前有一个html设置，看起来像:

<section class="topBar">The site's permanent top bar</section>
<header class="body">Some header info here</header>

和CSS设置:

.body { clear: both; margin: 0 auto; width: 600px; }
header {
height: 46px;
margin: 30px auto 20px auto;
}
.topBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

我们的目标是让topBar停留在页面的顶部，标题和所有在它下面滚动。

这在很大程度上是可行的。问题是，尽管标题的上边距被忽略，只要topBar的位置:固定(所以当页面加载时，标题几乎隐藏在topBar下面)。

我试过把页眉从margin-top改为top，但也没用。

如何修复margin-top被忽略?

这里实际上是一个bug报告和一个测试页面来显示问题:

Bug报告:http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

测试页面:http://feragnoli.com/ie7/

Answer 1

添加body标签padding-top:250px，并移除。lowerdiv的margin-top

Answer 2

放置SECTION。标题栏:

<header class="body">Some header info here</header>
<section class="topBar">The site's permanent top bar</section>

从SECTION开始。topBar已经固定了位置，所以文档中的顺序不应该那么重要…

我昨天刚刚遇到了同样的问题，所以上面的解决方案是我在开发中所做的，因为这是一个很久以前问过的问题，所以如果你已经找到了一个很好的解决方案，请告诉我如何!