IE6の位置決めボックスの偏差問題model_html/css_WEB-ITnose-htmlチュートリアル-php.cn

記事の出典: I Love Maomao Technology Blog
アドレス: http://www.52maomao.info

IE6 ボックスモデルが他のブラウザと異なるかどうかについては、あえて簡単に結論を出すことはできませんが、いくつかの違いがあるようですこれは、IE6 のボックスモデルが他のブラウザとは異なることを証明しています。

たとえば、今日は IE6 位置決めボックスモデルの偏差問題について説明します。

CSS プロパティの Position:absolute; と Position:relative; は、レイアウトの配置によく使用される 2 つのプロパティです。親要素でposition:relative;を使用して位置決めツリーとして設定する場合、position:absolute;を使用して子要素の位置を上、左、右、下で設定します。

次のような状況があります: 親要素にposition:relative; を使用し、padding:20px; を追加してから、position:absolute; によって子要素を配置します。

現時点では、IE6 に問題があります。親要素のエッジ領域を参照して配置されるのではなく、親要素のpadding属性を解析した後のエッジを参照して配置されます。FirefoxやChromeなどの他の標準ブラウザは、親要素のエッジ領域を参照して配置されます。親要素の端。

CSS 属性の導入では、position:absolute; は、前のレベルの位置決め属性を持つボックスの端の領域を参照して配置されます。これは、ここでの IE6 の解析がエラーまたはバグであることを意味します。

コードは次のとおりです。

(!DOCTYPE 宣言などの要素はすべて省略されています)

ブラウザでテストする場合、非常にうまく機能します。IE6 の「いいね！」ボックスの解析が親ボックスの左枠から 20px ずれていることが簡単にわかります。

テストアドレス: http://www.52maomao.info/wp-content/themes/gbray/demo/ie6_bug_position.html

このバグを解決する方法は非常に簡単で、IE6 固有のセレクター ( _) を使用して、サブボックスの左側を再定義します。

コードは次のとおりです: _left:-20px;

上記の例から、IE6 のボックスモデルが他のブラウザとは多少異なることがわかります。

このバグをテストしたときに、問題が見つかりました。つまり、使用する HTML 言語が HTML4.01 で、DTD が宣言されていない場合、すべての IE ブラウザーで、「いいね！」ボックスが 20 ピクセルずれて表示されます。

DTD が宣言されている場合、この問題は発生しません:

使用する言語が XHTML1.0 の場合、 DTD を宣言するかどうかに関係なく、IE6 以降の解析は正しく行われます。

元のアドレス: http://www.52maomao.info/ie6-positioning-box-model-of-deviation.html

ディスカッションへの返信 (解決策)

なぜ誰も私にコメントしないのですか?

IE6 の位置決めボックスモデルの偏差の問題は、この 1 か所に限定されません

そのうちの 1 つだけについて言及しました
他にはどこがありますか? ?アドバイスをお願いします！

もう 1 つの違いは、

に

が含まれている場合、内側のレイヤーの幅が外側のレイヤーレイヤーの幅を変更すると、IEでは外側のレイヤーが拡大されますが、他のブラウザでははみ出した部分が切り取られます。内側のレイヤーと外側のレイヤーに背景を追加して効果を確認できます

最大の違いはIE6であることです。非標準モードです、width=margin+border+padding+widthIn