IE7位置：fixed和margin-top问题答案

【问题标题】：IE7 position:fixed and margin-top problemIE7位置：fixed和margin-top问题
【发布时间】：2011-10-31 19:13:39
【问题描述】：

我目前的 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 保持在页面的顶部，而 header 和之后的所有内容都在其下方滚动。

这在大多数情况下都可以正常工作。问题是，只要 topBar 具有 position:fixed （因此当页面加载时，标题几乎隐藏在 topBar 下方），标题的上边距就会被忽略。

我尝试将页眉从 margin-top 更改为 top，但这也无济于事。

如何解决 margin-top 被忽略的问题？

这实际上是一个关于它的错误报告，并带有一个测试页面来显示问题：

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

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

【问题讨论】：

标签： css internet-explorer-7 position margin

【解决方案1】：

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

【讨论】：

非常感谢！我没有完全遵循，但我确实使用了 padding-top。我最终添加了 !padding-top: 30px 到标题

【解决方案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 的位置已经固定，所以文档中的顺序应该不是那么重要...

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

【讨论】：