IE7定位问题（保持原位的顶杆的绝对定位和固定定位）

Question

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

Here is the page

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

IE7的其他问题是： - guillemot（＆gt;＆gt;）在右边十大列表中的位置。 - 向下滚动页面时，右下方会出现一个框。在IE7中，此框中关闭（x）按钮的位置不正确。

我认为最好的解决方案是单独的IE7Fixes.css文件，我可以在IE7市场份额下降时停止使用。但我很欣赏有关该文件的确切内容的任何建议：）

Answer 1

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

  

想象一下，您希望页面顶部有一个固定的图层   接下来滚动该层。

     

显然探险家7无法做到   计算一个'位置：相对'div的上边距，该位置跟随a   'position：fixed'具有更高z-index的一个。第二层就是   无论你定义哪个marin-top （原文如此），都会坚持到页面顶部   它

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

---

对于海鸠，我发现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的组合定位，而不是浮动以获取一致的行为。