IE7定位问题（顶栏的绝对定位和固定定位）

Question

我需要放置一个保持固定的顶部栏，在其下方放置一个广告栏，然后是内容。为了更好的用户体验（我被告知更好的 SEO），我希望内容首先加载，而不是等待广告。所以内容在 HTML 中更高。这适用于所有现代浏览器，但 IE 7 是个问题。

Here is the page

第一次加载时，它似乎使用正确的填充加载，但在其他两个 div 加载到顶部之后，内容“向上移动”并隐藏在顶部两个 div 后面。

IE7 的其他问题是： - 海鸥 (>>) 在右侧 Top 10 列表中的位置。 - 当您将页面向下滚动到底部时，右下角会出现一个框。 IE7 中此框中关闭 (x) 按钮的位置不正确。

我认为最好的解决方案是一个单独的 IE7Fixes.css 文件，当 IE7 市场份额下降时我可以停止使用该文件。但我会很感激任何关于在该文件中究竟放什么的建议:)

Answer 1

听起来像这里描述的错误：http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

想象一下你想要在页面顶部有一个固定层 跟随滚动到该层下。

显然 explorer 7 无法 计算一个'position：relative' div的上边距 'position:fixed' 具有较高 z-index 的一个。第二层只会 无论您为哪个 marin-top (sic) 定义，都停留在页面顶部 它。

对我有用的是从dfncontainer 中删除margin-top: 200px 并将其作为padding-top 添加到body。然而，虽然这修复了 IE7 中的布局（据我所知），但它在 IE8 和 IE9 中添加了太多的填充（尚未测试其他浏览器），所以看起来只有 IE7 的样式表是必要的。

---

对于 guillemots，我发现 this Stack Overflow question/answer 似乎是一个可行的解决方案：

.list-box OL LI {
    position: relative;
}

.list-box .guillemot {
    /* <<delete these rules>>
      float: right;
      margin-right: 7px;
    */
    position: absolute;
    right: 7px;
}

好消息是该修复似乎也适用于 IE8 和 IE9，因此您可能不需要条件样式表。

“另见”框中X 按钮的位置也可以使用position: absolute 和top 和right 的组合来定位，而不是浮动以获得一致的行为。