7

position:fixed は 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 のためにサイトをハッキングするのをやめるのが早ければ早いほど、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 で動作します。

于 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 でこれをテストしたところ、問題なく動作し、... Jitter は発生しませんでした。


たとえば、ボックスのクラスを持つ要素があるとしましょう...

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



<HTML>開始タグを条件付き IE ステートメントに 置き換えます...

<!--[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');
}



問題は、どのページ スクロールでも要素がジッターすることです。これは、これを補う 1 つの方法です...

注: このコードは、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

最近、IE 6 以降で動作する position:fixed を取得するための jQuery プラグインを作成しました。スクロール時にジッターせず、(ユーザーエージェントではなく) 機能を調べ、Internet Explorer 6、7、8 で動作します。

IE7+ で厳密モードを使用する場合、position: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 に答える