ホームページ >ウェブフロントエンド >jsチュートリアル >js は、position:fixed をサポートしていない IE6 の bug_javascript テクニックを完全に解決します
js は、position:fixed をサポートしていない IE6 の bug_javascript テクニックを完全に解決します
- WBOYオリジナル
- 2016-05-16 16:02:381404ブラウズ
まずコードを見てみましょう
<!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)))}
/* 除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 には複数ステップのレンダリング プロセスがあります。ブラウザをスクロールまたはサイズ変更すると、すべてがリセットされてページが再描画され、その時点で 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)))}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。