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的位置为fixed，就会忽略标题的上边距（因此当页面加载时，标题几乎隐藏在topBar下面。）

我已尝试将页眉从页首顶部更改为顶部，这也无济于事。

如何修复margin-top被忽略？

这是一个关于它的错误报告，其中有一个测试页面来显示问题：

错误报告：http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

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

Answer 1

将padding-top：250px添加到body标签，并从.lower div中删除margin-top

Answer 2

将SECTION.topBar放在HEADER.body下：

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

因为SECTION.topBar已经固定位置，所以文档中的顺序不应该那么重要......

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

IE7位置：固定和保证金问题

2 个答案: