DIV+CSS レイアウトの互換性 issue_html/css_WEB-ITnose

div+css レイアウトを学習した後、クロスブラウザーのテストページが違いすぎるという問題が常に発生します。この章を学習した後、違いの原因がわかりました。

一部の CSS 属性の解析結果はブラウザごとに異なります。これは、個々のブラウザの開発者が w3c 標準に従って一部の CSS 属性の解析を設計していないためです。使用できるブラウザにはさまざまな種類があります。ページ レイアウトをデバッグするときは、IE と非 IE の 2 つのカテゴリに分類するだけです。主な理由は、Microsoft の IE ブラウザが W3C 標準に従って設計されていないことです。さらに、IE には多くのバージョン (IE5、IE6、IE7、 IE8 など）、CSS の解析にも多くの違いがあります。現時点では、IE5 が適している人はほとんどいないため、考慮する必要はありません。一般に、IE ブラウザの互換性は、IE の新しいバージョンごとに標準化に向けて進んでいます。 IE ブラウザには互換性がありません。試すのに最適なブラウザは Firefox です。

ボックス モデルは CSS の重要な概念です。標準の w3c ボックス モデルの範囲には、マージン、ボーダー、パディング、コンテンツ領域が含まれます。また、コンテンツ領域には他の部分は含まれませんが、IE ボックス モデルにはマージン、ボーダー、パディング、およびコンテンツ領域も含まれます。ただし、W3C ボックス モデルとは異なり、IE ボックス モデルのコンテンツ領域にはボーダーとパディングが含まれます。これが、IE ブラウザが他のブラウザと互換性がない主な理由です

この観点から、IE ブラウザが標準の W3C 仕様に従って解析されている限り、この問題は解決できます。したがって、Web ページの先頭に DOCTYPE ステートメントを追加する必要があります。 DOCTYPE は現在のドキュメントの基本タイプを定義し、Web ページを開くときにどのようなルールに従う必要があるかをブラウザーに伝えるために使用されます。DOCTYPE 宣言は、次のような必須のコンポーネントです。

次のこともできます最新のシンプルな DOCTYPE 宣言方法を使用してください。コードは次のとおりです

DOCTYPE はほとんどの問題を解決しますが、互換性のないタグとスタイルがまだいくつかあり、開発者による慎重なデバッグが必要です