js は、position:fixed をサポートしていない IE6 の bug_javascript テクニックを完全に解決します-jsチュートリアル-php.cn

js は、position:fixed をサポートしていない IE6 の bug_javascript テクニックを完全に解決します

WBOY

リリース： 2016-05-16 16:02:38

オリジナル

1389 人が閲覧しました

まずコードを見てみましょう

<!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>

ログイン後にコピー

上記のコードはインターネット上で非常に一般的で、html{overflow:hidden} と body{height:100%;overflow:auto} を設定することで、IE6 でのposition:fixed 効果を実現します。つまり、これにより、ページ上のオリジナルの絶対値と関係が固定効果になります。疑問がある場合は、自分で試してみてください。

そこで情報を検索したところ、IE6 でのposition:fixed 効果は Internet Explorer の CSS 式によって完全に実現できることがわかりました。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)))}

ログイン後にコピー

上記のコードは、要素のフローティングマージンを設定する場合、たとえば、要素を上から 10 ピクセル、下から 10 ピクセルに設定する場合、それを 2 回設定する必要があります。左の場合は、これを行う必要があります Zi は次のように書きました:

/* 除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))}

ログイン後にコピー

このようにして、IE6 でのposition:fixed の影響は解決され、他の絶対および関係には影響しません。ただし、中断された要素が振動するという問題がまだ残っています。

IE には複数ステップのレンダリングプロセスがあります。ブラウザをスクロールまたはサイズ変更すると、すべてがリセットされてページが再描画され、その時点で CSS 式が再処理されます。これにより、醜い「振動」バグが発生する可能性があります。固定位置の要素は、(ページの) スクロールに合わせて調整する必要があり、その結果「ジャンプ」します。

この問題を解決する秘訣は、background-attachment:fixed を使用して、本文または HTML 要素に背景画像を追加することです。これにより、ページは再描画する前に CSS を処理するようになります。再描画する前に CSS を処理するため、再描画する前に最初に CSS 式も処理されます。これにより、完全にスムーズな固定位置要素を実現できるようになります。
すると、background-image には実際の画像は必要なく、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)))}

ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。