HTML と CSS の標準化が完了する前は、各ブラウザには HTML と CSS 解析の独自の異なる実装があり、多くの古い Web ページはこれらの非標準実装に従って設計されていました。 HTML と CSS の標準が決定されたら、ブラウザはその標準に従って HTML と CSS のサポートを実装する必要があり、他方では、標準ではない古い Web ページのデザインとの下位互換性を確保する必要があります。したがって、最近のブラウザには通常、標準モードと奇妙なモードという 2 つのレンダリングモードがあります。標準モードでは、ブラウザは HTML および CSS 標準に従ってドキュメントを解析およびレンダリングしますが、奇妙なモードでは、ブラウザは古い非標準実装に従ってドキュメントを解析およびレンダリングします。

ブラウザはどのレンダリングモードを使用するかをどのように決定しますか?

ページに <!DOCTYPE html>(注: 大文字と小文字は区別されません) を追加すると、標準モードをオンにするのと同じになります。つまり、次のコードに示すように:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

ログイン後にコピー

省略した場合、ブラウザは特定の基準を満たさないレンダリングモードを使用します。

標準モードと奇妙なモードの一般的な違い

ボックスモデル処理の違い: 標準CSSボックスモデルの幅と高さは、パディングを除いたコンテンツ領域の高さと幅と同じです。とボーダー、および IE6 より前のブラウザーによって実装されたボックスモデルの幅と高さの計算方法には、パディングとボーダーが含まれます。したがって、IE では、ボックスモデルの幅と高さは、奇妙なモードと標準モードで異なる方法で計算されます
インライン要素の垂直方向の配置: 多くの初期のブラウザーは、画像をそれらを含むボックスの下の境界線に配置していました。 CSS 仕様では、ボックス内のテキストのベースラインに揃える必要があります。標準モードでは、Gecko ベースのブラウザはベースラインに揃えられますが、quirks モードでは下に揃えられます。最も直接的な例は、写真の表示です。標準モードでは、画像は親要素の下枠と整列していません。注意深く見ると、画像と親要素の下枠の間に小さな隙間があることがわかります。これは、標準モードでは画像がベースラインに揃えられているためです。奇妙なモードでは、この問題は存在しません。

以上がブラウザの標準モードと奇妙なモードの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。