js完璧解決IE 6はposition:fixedのbugをサポートしていません。

3863 ワード

まずセグメントコードを見てください


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 position:fixed bug</title>
<style>
*{padding:0;margin:0}
p{height:2000px}
#gs{border:1px solid #000;position:fixed;right:30px;top:120px}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="rightform">
<p>11111111111111111</p>
<input id="gs" name="gs" type="text" value="" />
</div>
</body>
</html>

以上のコードはネットでよく見られます。設定を通じて(通って)overflowとbody{height:100%)overflow:aut)はie 6の下でposition:fixedの効果を実現しますが、このような方法には欠陥があります。つまり、これはページ上の既存のabsolute、relationをすべてfixedの効果に変えます。ここで私はdemoをしません。疑いがあれば、自分で試してみてもいいです。
そこで私は資料を探しましたが、一つのインターネット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)))}

以上述べましたが、本文の内容は全部です。お好きになってください。