Css+Divレイアウト学習(4) hack_html/css_WEB-ITnoseについて

すべてのブラウザーが設定された CSS を正しく表示できるわけではありません。一般的なすべてのブラウザーで Web ページを一貫して表示できるように、CSS を使用する方法はありますか。笑、世の中には、いくつかの互換性のない状況を統一できる素晴らしいものが本当にあります。このカテゴリは CSS ハックと呼ばれます。以下にCSSハックを簡単に紹介します。

標準に準拠したブラウザでは、他の要素を含む要素の合計幅を計算する際に、これらのコンテナの幅とそのパディングと境界線を考慮する必要があります。これは、幅 300 ピクセルのコンテナの実際の合計幅は、300 ピクセルにパディングとボーダーを加えたものであることを意味します。これは、要素の合計幅を計算する方法です。

ただし、IE5 および IE5.5 はこの方法では計算されません。幅からボーダーとパディングの幅を減算して、コンテナの実際の幅を取得します。つまり、幅 300 ピクセルのコンテナは、最終的に幅 300 ピクセルになるわけではありません。パディングが 10 ピクセルに設定され、ボーダーが 10 ピクセルに設定されている場合、コンテナーの実際の幅はわずか 300-10-10-10-10、つまり 260 ピクセルになります。例は次のとおりです:

#Sidebar{ width:300px; padding:10px; border:15px Solid #000; }

このボックス モデルの場合、その合計幅は border-left + padding-left + width + padding- です。 right + border-right、これは 15+10+300+10+15 に等しく、合計 350 ピクセルになります。ただし、IE5 および IE5.5 の場合、合計幅は 300 ピクセルです。幸いなことに、何人かの天才がこの問題を解決しました。この問題を解決する方法を見てみましょう。

#サイドバー{ パディング:10px; ボーダー:15px; 音声ファミリー:""}"" } html>ボディ #サイドバー:300px; ; }

これはボックス モデルのハックです。まず、IE5 と IE5.5 はそれに応じて幅を調整し、次に voice-family を使用します。これはビジュアル CSS プロパティではないため、最終的な表示には影響しません。ただし、このルールにより構文の調整がいくつか追加されるため、IE5 および IE5.5 は、このステートメントがセレクター ステートメントをオーバーライドすると誤って認識します。
次の html>body #Sidebar{width:300px;} ステートメントは、一部の Css2 互換ブラウザ (Opera ブラウザなど) では上記の「紛らわしい」ステートメントを実行しないため、最後のステートメントを 1 文追加する必要があります。