位置の詳細な説明: IE6 で修正された問題-htmlチュートリアル-php.cn

位置の詳細な説明: IE6 で修正された問題

亚连

リリース： 2018-05-21 15:21:20

オリジナル

2132 人が閲覧しました

この記事では主に、位置の詳細な説明: 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 サイトの他の関連記事を参照してください。