js完璧解決IE 6はposition:fixedのbugをサポートしていません.
3492 ワード
まずセグメントコードを見てください
そこで私は資料を探しましたが、一つのインターネットExplorerのCSS表式(expression)を通じて完璧にie 6の下でposition:fixed効果を実現することができます.cssコードは以下の通りです.
IEはマルチステップのレンダリングプロセスを持っている.スクロールしたり、ブラウザのサイズを調整したりすると、すべてのコンテンツをリセットしてページを描き直します.この場合は、css表現を再処理します.これは醜い「振動」バグを引き起こします.ここで位置を固定する要素はあなたの(ページの)スクロールに合わせて調整しなければならないので、「鼓動」になります.この問題を解決するためのテクニックはbackground-atachment:fixedはbodyまたはhtml要素にbackground-mageを追加します.これは強制的にページを塗り替える前にCSSを処理します.書き換える前にCSSを処理するので、同じように書き換える前にまずあなたのCSS表現を処理します.これは完璧な平滑化を実現します.そして私はbackground-mageが真実の写真を必要としないことを発見しました.about:blankに設定すればいいです.
完全コードを添付します.
IE6 position:fixed bug
11111111111111111
以上のコードはネット上でよく見られます.設定を通じて(通って)overflowとbody{height:100%;overflow:aut)を実現します.ie 6の下でposition:fixed効果がありますが、この方法に欠陥があります.そこで私は資料を探しましたが、一つのインターネットExplorerのCSS表式(expression)を通じて完璧にie 6の下でposition:fixed効果を実現することができます.cssコードは以下の通りです.
/* IE6 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
上のコードは直接使用できます.元素の浮遊辺距離を設定するには、それぞれ2回の設定が必要です.たとえば、ある元素を上から10ピクセル、左から10ピクセルにしたいなら、このように書きます.
/* IE6 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}
これにより、IE 6でposition:fixedの効果が解決され、他のabsolute、relationにも影響を及ぼさないという問題がありますが、浮遊する要素に振動が発生するということです.IEはマルチステップのレンダリングプロセスを持っている.スクロールしたり、ブラウザのサイズを調整したりすると、すべてのコンテンツをリセットしてページを描き直します.この場合は、css表現を再処理します.これは醜い「振動」バグを引き起こします.ここで位置を固定する要素はあなたの(ページの)スクロールに合わせて調整しなければならないので、「鼓動」になります.この問題を解決するためのテクニックはbackground-atachment:fixedはbodyまたはhtml要素にbackground-mageを追加します.これは強制的にページを塗り替える前にCSSを処理します.書き換える前にCSSを処理するので、同じように書き換える前にまずあなたのCSS表現を処理します.これは完璧な平滑化を実現します.そして私はbackground-mageが真実の写真を必要としないことを発見しました.about:blankに設定すればいいです.
完全コードを添付します.
/* IE6 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6 */
/* IE6 bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
以上述べましたが、本文の内容は全部です.お好きになってください.