IE6 中的 CSS 固定容器答案

【问题标题】：CSS fixed container in IE6IE6 中的 CSS 固定容器
【发布时间】：2011-02-19 20:38:08
【问题描述】：

#fixed {
    border:1px solid red;
    height:100px;
    left:50%;
    margin-left:-500px;
    position:fixed;
    top:0;
    width:1000px;
}

如何使这个元素在 IE6 中以相同的方式显示？ div 是正文中的第一个元素问候

【问题讨论】：

标签： css cross-browser internet-explorer-6

【解决方案1】：

IE 6 不支持position: fixed (Source)，据我所知，没有简单的纯 CSS 解决方法。

您需要使用基于 JavaScript 的解决方案，在页面滚动时调整元素的位置。

this SO question 中概述了一个非常简单的解决方案。根据我的经验，这些基于 JS 的解决方案往往非常不稳定和生涩，它们远不及 position: fixed 的流畅度。

【讨论】：

【解决方案2】：

嗯，你可以试试这个 css - 然后元素居中。

<!--[if lt IE 7]>
<style type="text/css">
#fixed {
margin: 0 auto; 
}
</style>
<![endif]-->

【讨论】：

【解决方案3】：

抱歉，没有时间根据您的确切要求翻译我的示例，但从这些代码中获取灵感：

// Modern browser : FF, Chrome, Opera
// ----------------------------------------

#fixmetoo { position: absolute; right: 0px; bottom: 0px; }
div > div#fixmetoo { position: fixed; }


// IE6
-------------------------------------------

<!--[if lt IE 7]>
div#fixmetoo {
        right: auto; bottom: auto;
        left: expression( ( -80 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
        top: expression( ( -100 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
<![endif]-->

【讨论】：

很好，除了它相对于底部固定而不是居中。我不太喜欢这样的ignoreMe n。我需要的是中心顶部。