:修正IE 6はposition:fixedのバグをサポートしていません

プロジェクトでposition:fixedを使用したときにIE 6で互換性がない状態に遭遇し、仮想のvirtual_しか使用できませんでした.body、このvirtual_bodyは実際にはdivであり、divの幅をページの幅の高さ、すなわち100%に制御し、このdivのcssを設定します.

.virtual_body{ overflow:scroll; width:100%; height:100%;  position:relative;} 

ただし、その前にこのページのbody&htmlを次のように設定します.

body,html{ overflow:hidden; width:100%; height:100%; margin:0; position:relative;}

これでvirtual_に書きますbodyの中の内容は普通のページの内容の形式を実現することができます.virtualに書いてありますbodyの外のdivはそのposition:absoluteを設定することができます;これでvirtual_bodyの内容がどのようにスクロールするかは、このdivが固定されているため、IE 6でposition:fixedのような効果を実現しています.
今日は司徒正美のブログを见ましたので、転载して、勉强しました.の
修正IE 6はposition:fixedのバグをサポートしていません
周知のように、IE 6はposition:fixedをサポートしていない.このバグは、IE 6の2倍marginやPNGの透明性をサポートしていないなどのバグと同じように悪名高い.先日、自分のブログのテンプレートを作ったとき、この問題に遭遇しました.当時は簡単にIE 6を無視していましたが、IE 6を使っている友達が何人かいて、一緒にBS私と一緒に・・・しかし、大きなプロジェクトやビジネスサイトに対して、この属性が役に立つ場合、直接無視することはできません.
 
どうやってposition:fixedをIE 6で働かせたのですか?
本明細書で使用するテクニックは、インターネットExplorerのCSS式(expression)を使用することです.キャッシュのために更新されない可能性があるため、この式を直接使用することはできません.この点を解決する最も簡単な方法は、evalを使用してあなたの文を包むことです.
「振動」の問題をどのように解決しますか?
IEにはマルチステップレンダリングプロセスがあることは明らかです.ブラウザのサイズをスクロールまたは調整すると、すべてのコンテンツがリセットされ、ページが再描画され、css式が再処理されます.これは醜い「振動」バグを引き起こし、ここで位置を固定する要素はあなたの(ページの)スクロールに従うように調整する必要があり、「ジャンプ」します.
この問題を解決するテクニックは、background-attachment:fixedを使用してbodyまたはhtml要素にbackground-imageを追加することです.これにより、ページが再描画される前にCSSを処理するように強制されます.再描画する前にCSSを処理するので、再描画する前にまずCSS式を処理します.これにより、完璧なスムーズな固定位置要素が実現します!
この案は私が提供したものではない.私はネット上のどこかでこれらを読んだのです.誰がこの方法をオリジナルしたか知っていれば、先端観察を教えてください.
私が見つけたもう一つのテクニックは、あなたが本当の写真を必要としないことです.spacerの代わりにabout:blankを使用することができます.gif画像は、同じように優れています.
CSS Code

/* position:fixed IE6   ! */



 



.fixed-top /*      */{position:fixed;bottom:auto;top:0px;}



.fixed-bottom /*      */{position:fixed;bottom:0px;top:auto;}



.fixed-left /*      */{position:fixed;right:auto;left:0px;}



.fixed-right /*      */{position:fixed;right:0px;left:auto;}



/*       IE6            */



* html,* html body /*   IE6  bug */{background-image:url(about:blank);background-attachment:fixed;}



* html .fixed-top /* IE6      */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}



* html .fixed-right /* IE6      */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}



* html .fixed-bottom /* IE6       */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}



* html .fixed-left /* IE6      */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

更新:border、padding、marginサポートを追加!
Note:marginをサポートする必要がなければ、すべての`parseInt`部分を削除することができます.
Note:標準モードでしかテストしていません.