7

位置：已修复，不适用于 Internet Explorer 6。我无法真正理解在 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>
4

6 回答 6

20

不支持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]-->

结果不是超级顺利，但它确实有效。

更新

我不太清楚应该如何使用它。只需将具有“位置：固定”的任何元素的 id（或类）添加到上述块开头的声明列表中，它们就会在 IE6 中表现自己。

于 2009-07-02T13:55:16.533 回答
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');
}
于 2009-07-02T13:55:11.290 回答
2

我刚刚在 IETester 的 IE6 版本上对此进行了测试，效果很好，而且……没有抖动，哇！


假设您有一个带有类框的元素，例如...

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



用条件 IE 语句替换开始<HTML>标记...

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

和

<!--[if !IE]--> <html> <!--[endif]-->

然后像MatW & 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>
于 2012-05-12T16:19:17.133 回答
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 在内的所有浏览器。

于 2009-07-03T13:55:22.003 回答
0

我最近写了一个 jQuery 插件来获取 position:fixed 在 IE 6+ 中的工作。它在滚动时不会抖动，它着眼于功能（不是用户代理），适用于 Internet Explorer 6、7、8。

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

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

这样的事情可能对你有用：

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

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

于 2010-01-10T02:10:38.547 回答
-1

可以使用 CSS 表达式来做到这一点，但需要一些额外的技巧来获得平滑的滚动：

html, body {
    _height: 100%;
    _overflow: hidden
}
body {
    _overflow-y: auto
}
#fixedElement {
    position: fixed;
    _position: absolute; / ie6 /
    top: 0;
    right: 0
}
于 2018-04-29T07:36:07.423 回答