Question

位置：修复不适用于Internet Explorer 6.我无法理解谷歌上发现的修复程序。我需要它在IE6，IE7，IE8＆amp; FireFox 3.0。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Sidebar fixed</title>
    <style type="text/css">
    #wrapper {
        position:relative;
        width:900px;
        margin:0 auto 0 auto;
    }
    #sidebar_left {
        position:fixed;
        height:200px;
        width:200px;
        border:1px solid #000;
    }
    #sidebar_right {
        position:fixed;
        height:200px;
        width:200px;
        margin-left:700px;
        border:1px solid #000;
    }
    #content {
        position:absolute;
        height:2000px;
        width:480px;
        margin-left:210px;
        border:1px solid #000;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="sidebar_left">
            <p>Left sidebar</p>
        </div>
        <div id="sidebar_right">
            <p>Right sidebar</p>
        </div>
        <div id="content">
            <p>This is the content</p>
        </div>
    </div>
</body>
</html>

Answer 1

不支持IE6！人们越早停止攻击IE6的网站，它的牵引力就越小，死亡的速度就越快！或者，在第一个样式块之后添加此代码;

<!--[if IE 6]>  
<style type="text/css">  
#sidebar_right, #sidebar_left {  
position:absolute; /* position fixed for IE6 */  
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');  
}  
</style>  
<![endif]-->

结果不是非常流畅，但确实有效。

<强>更新

我不太清楚如何使用它;只需将具有“position：fixed”的任何元素的id（或类）添加到上述块开头的声明列表中，它们将在IE6中表现出来。

Answer 2

是的，IE6很糟糕。这是黑客......

_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');

基本上告诉IE6，即使它滚动，它也绝对位于左上角。这应该在你的css的其余部分下面，因为它在IE6中超越了它。

这是你的左栏...

#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

Answer 3

我刚刚在IETester的IE6版本上对此进行了测试，它运行得很好......没有抖动，喔！

<小时/>
假设你有一个带有一类框的元素，例如......

.box {
    position: fixed;
    top: 0px;
    left: 0px;
}

将开头<HTML>标记替换为条件IE语句...

和

 <html> 

然后喜欢 MatW ＆amp; mitchbryson 建议使用'表达'来模拟固定的位置。

注意：此代码位于CSS中原始元素的样式之后。

#ie6 .box { 
    position: absolute;
    top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
    left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

问题是在任何页面上滚动元素都会抖动，这是补偿的一种方法。

注意：此代码位于CSS的顶部或CSS中的样式“HTML {}”之后。

#ie6 {
    background-image:url(about:blank);
    background-attachment:fixed;
}

根据 Thomas Aylott @ SubtleGradient.com，

“...这会在页面重绘之前强制处理CSS。由于它在重绘之前再次处理css，因此它会在重绘之前继续处理你的css表达式。这样你就完美了平滑位置固定元件！“”

文章链接：http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

例如，一起......

<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->

<HEAD>
<STYLE>

#ie6 {
   background-image:url(about:blank);
   background-attachment:fixed;
}
.box {
   position: fixed;
   top: 0px;
   left: 0px;
}
#ie6 .box { 
   position: absolute;
   top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
   left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

</STYLE>
</HEAD>

<BODY>
    <div class="box"></div>
</BODY>

</HTML>

Answer 4

找到了我调整过的解决方案（基本上我更改的行是：$（'＃sidebar_left'）。css（'top'，document.documentElement.scrollTop）;）：

// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0

/********************************
*   (C) 2009 - Thiago Barbedo   *
*   - tbarbedo@gmail.com        *
*********************************/
window.onscroll = function()
{
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
            $('#sidebar_left').css('top',document.documentElement.scrollTop);
            $('#sidebar_right').css('top',document.documentElement.scrollTop);
        } else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
            $('#sidebar_left').css('top','299px');
            $('#sidebar_right').css('top','299px');
        }
    }
}

它抖动并且看起来很糟糕，但适用于所有浏览器，包括IE6。

Answer 5

我最近写了一个jQuery插件来获取位置：修复了IE 6+的工作。 在滚动时不会抖动，它会查看功能（非用户代理），适用于Internet Explorer 6,7,8。

如果在IE7 +位置使用严格模式：固定将被接受，但默认情况下IE7 +在Quirks模式下运行。这个插件检查浏览器功能，如果它不支持position：fixed，那么它实现了jQuery修复。

http://code.google.com/p/fixedposition/

这样的事可能适合你：

$(document).ready(function(){
   $("#chatForm").fixedPosition({
      debug: true,
      fixedTo: "bottom"
   });
});

您可能需要进行一些小的CSS调整才能使其适用于您的代码。我正在研究“偏移”值作为我们所说的选项。

Answer 6

可以使用CSS表达式来实现，但是需要一些额外的黑客才能获得平滑的滚动：

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}

IE 6与位置：固定

6 个答案: