IE 6与position:fixed的比较

Question

IE 6与position:fixed的比较

7

在Internet Explorer 6中，position:fixed无法正常工作。我无法理解在Google上找到的修复方法。我需要它能够在IE6、IE7、IE8和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>

- Cudos

6个回答

5

是的，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');
}

- mitchbryson

1

我忘了在那段代码中提到我正在使用下划线hack来兼容IE6。 - mitchbryson

2

我刚在IETester的IE6版本上测试了一下，效果非常好，没有抖动，太棒了！假设你有一个类名为box的元素……

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

用 IE 条件语句替换开头的 <HTML> 标签...

和
 <html> 
然后像 MatW 和 mitchbryson 建议的那样，使用 "expression" 来模拟固定位置。

注意：此代码应放在 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;
}

根据SubtleGradient.com网站上的Thomas Aylott的说法：
“……这迫使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>

- Terry

我之前有严重的抖动问题，现在已经解决了！+1 - Talk nerdy to me

0

发现了这个解决方案，我进行了微调（基本上我更改的行是：$('#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。

- Cudos

我更喜欢使用CSS的方法，尽管它涉及一些在CSS中被禁止的表达式。这样做可能会影响性能。 - Jess Jacobs

0

我最近编写了一个jQuery插件，以使IE 6+中的position:fixed正常工作。它在滚动时不会抖动，它查看能力（而不是用户代理），可以在Internet Explorer 6、7、8中使用。

如果您在IE7+中使用严格模式，则会尊重position:fixed，但默认情况下IE7+操作在Quirks Mode中。此插件检查浏览器功能，如果不支持position:fixed，则实现jQuery修复。

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

这样的代码可能适合你：

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

您可能需要进行一些小的CSS调整，以使其适用于您的代码。我正在努力将“偏移”值作为选项。

- Chris Iona

-1

可以使用CSS表达式来实现，但需要一些额外的技巧来实现平滑滚动：

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

- Kavian K.

哇，回答一个IE6的问题已经8年了！你还在用IE6吗？ - Temani Afif

我知道这是一个旧帖子，但这个答案可能对任何人都很有效。 - Kavian K.

认真吗？现在没有人再使用IE6了...它的最后一个版本是10年前发布的...而你呢？你还在用它吗？ - Temani Afif

不。我不用它，但是你确定再没有人在使用IE6了吗？ - Kavian K.

你如何知道这段代码能够正常工作？--> 通过使用IETester。 - Kavian K.

显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathew · Accepted Answer

不支持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中表现正常。