IE7位置:固定和边距最高的问题 [英] IE7 position:fixed and margin-top problem

问题描述

我目前有一个类似html的设置:

I currently have an html setup that looks like:

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

以及类似CSS的设置:

And a CSS setup like:

.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停留在页面的顶部，标题及其后的所有内容滚动到页面下方.

The goal is to have topBar stay at the top of the page, and the header and all after it scroll below it.

在大多数情况下都可以正常工作.问题在于，只要topBar具有position:fixed，标题的顶部边距就会被忽略(因此，当页面加载时，header几乎隐藏在topBar下方).

That for the most part works fine. The problem is though that header's top margin is ignored as long as topBar has position:fixed (So when the page loads, header is pretty much hidden below topBar).

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

I've tried changing header from margin-top to top and that doesn't help either.

我该如何解决被忽略的页边空白?

How do I fix margin-top being ignored?

这里实际上是一个错误报告，上面有一个测试页来显示问题:

Here is actually a bug report on it with a test page to show the problem:

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

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

推荐答案

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

add padding-top:250px to the body tag, and remove the margin-top from the .lower div

这篇关于IE7位置:固定和边距最高的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！