ホームページ > 記事 > ウェブフロントエンド > 位置の詳細な説明: IE6 で修正された問題
位置の詳細な説明: IE6 で修正された問題
- 亚连オリジナル
- 2018-05-21 15:21:202020ブラウズ
この記事では主に、位置の詳細な説明: IE6 での修正された問題とスクロール バーによるスクロールの影響についての関連情報を紹介します。この記事が必要な友人の参考になれば幸いです。位置: IE6 で修正されました スクロール バーによるスクロールの問題と効果
前書き:
「[jQuery] IE6 互換のスクロール監視」 (クリックするとリンクが開きます) では、IE6 の問題を解決することが記載されています問題を解決するには、特に js ファイルを導入し、それを解決するためにこの p の固定位置を宣言するスクリプトを宣言します。これは最初は良くありません。インポートしたJavaScriptの管理が難しいことに加えて、headステートメントにJavaScriptを導入し、pのidを宣言してからスクリプト内でステートメントを作成する必要があり、非常に面倒です。
position:fixed を使用することは、次の効果を達成しようとすることに他なりません。 IE7以上のブラウザでは基本的にposition:fixedで問題ありません: IE8:FireFox:
ただし、IE6では直接position:fixed属性が存在しないため、以下の効果を実現します: 
は、position:Absolute;を使用し、CSSスタイルで実行されるJavaScriptスクリプトを追加することによってのみ解決できます。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.fixedbox {
background: #69C;
height: 60px;
width: 100px;
position: fixed;
bottom: 100px;
/*IE6实现position: fixed;*/
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_position: absolute;
_top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
/*等价于position: fixed;虽然代码好长，但是根本就不用管*/
_margin-bottom:100px;/*设置位置，不要用bottom，而是改用margin-bottom，margin-xx来实现*/
}
</style>
</head>
<body>
<p style="float:left;width:80%;min-height:100px;">
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
<p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>
</p>
<p style="float:left;width:20%;min-height:100px;"><p class="fixedbox"></p></p>
<p style="clear:both"></p>
</body>
</html>IE6 スタイルの上記のコードの前には _ が付いており、_ の部分は IE6 固有に書き直されたスタイル ステートメントです。詳細については、「[CSS] CSS スタイルの ! important、*、_ 記号について」を参照してください。クリックしてリンクを開きます) 実際、IE6 では、次の CSS: .fixed{
position: absolute;
top: expression(eval(
document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight-
(parseInt(this.currentStyle.marginTop,10)||0)-
(parseInt(this.currentStyle.marginBottom,10)||0)));
} は他のブラウザの CSS と同等です: .fixed{
position: fixed;
} もちろん、IE6 で修正されたposition: を実装する CSS は、一部のブラウザでは正しく動作しない可能性があります。ブラウザでは、そのスタイルが IE6 でのみ実行されることを示すために、各スタイルの前にアンダースコア _ を追加します。 同時に、IE6 が上記のスタイルになった後は、他のブラウザーのように右、上、左、下を使用して位置を設定するのではなく、margin-bottom、margin-left、margin-right を使用して位置を設定します。 p は位置によって固定されます: ,ここで p の位置を調整するときも注意が必要です。上記の IE6 互換の CSS は top 属性を使用するため、margin-top を設定したい場合は機能しません。 p の位置がフローティングの場合、トップの場合は次のように記述します。 .fixed{
/*IE6实现position: fixed;*/
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
_margin-top:100px;
} ここで _top に関するコードが非常に短いのは、 を使用する必要がないためです。 document.documentElement.clientHeight を使用して、ブラウザーの表示ウィンドウ サイズを取得します。 そして -this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0) は、より正確に微調整することです。追加する必要はありません。ちょっとした視覚効果があるだけです。 さらに、上記のコードからわかるように、fixedboxに関しては、スクロールバーのfloat:left属性でスクロールするときに親のpを維持したいため、左右を設定しませんでした。 つまり、右側の青い色のブロックと左側の多くのSSは、まだ80%と20%に分かれています。 上記は私があなたのためにまとめたものです。 関連記事:
IE9 より前のバージョンでの JavaScript のメモリ リークの問題 (詳細な概要)
JavaScript hasOwnProperty() 関数 (画像とテキストのチュートリアル、コード例付き)
JQuery、Extjs、YUI、違いPrototype、DojoなどのJSフレームワークの応用シナリオ（実技）
以上が位置の詳細な説明: IE6 で修正された問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。