互換モード (Web標準[W3Cの仕様]が定まる以前からの表示モード)

 
  

互換モードの主な特徴

「互換モード」は、Web標準(W3Cの仕様)が定まる以前からの表示方法なので、バグや独自解釈を含め、旧来のブラウザの表示方法と互換性のある表示を行い、文法的なミスもある程度カバーして表示する傾向があります。


互換モードにおける記述の適用

記述 ie6ie7ff3o9sf3N7Mac
ie5
1. HTMLで色指定に#がない (仕様ではΧ) Ο Ο Ο Ο Ο Ο -
2. CSSで色指定に#がない (仕様ではΧ) Ο Ο Χ Ο Ο Χ -
3. CSSで数値に単位がない (仕様ではΧ) Ο Ο Ο Ο Ο Ο -
4. CSSで数値と単位の間に空白文字がある (仕様ではΧ) Ο Ο Χ Χ Ο Χ -
5. CSSでキーワードが""で囲まれている (仕様ではΧ) Ο Ο Χ Χ Χ Χ -
6. ボックスにおけるwidth, heightプロパティの値 (仕様では内容領域) border
padding
を含む
border
padding
を含む
内容
領域
内容
領域
内容
領域
内容
領域
border
padding
を含む
7. font-sizeプロパティの標準サイズ (仕様ではmedium) small small medium small medium medium small
8. margin:autoでのブロック要素がセンタリング (仕様ではΟ) Χ Χ Ο Ο Ο Ο Ο
9. img要素におけるpaddingプロパティのサポート (仕様ではΟ) Χ Χ Ο Ο Ο Ο -
10. text-align:centerで適用対象でないブロック要素がセンタリング (仕様ではΧ) Ο Ο Χ Χ Χ Χ Ο
11. テーブルセルにおける画像の配置で画像の下部に隙間が生じる (仕様ではΟ) Χ Χ Χ Χ Χ Χ -
12. テーブル内の記述にテーブル外部のスタイルが継承される (仕様ではΟ) Χ Χ Χ Χ Χ Χ -


標準モードにおける記述の適用

記述 ie6ie7ff3o9sf3N7Mac
ie5
1. HTMLで色指定に#がない (仕様ではΧ) Ο Ο Χ Ο Ο Χ -
2. CSSで色指定に#がない (仕様ではΧ) Χ Χ Χ Χ Χ Χ -
3. CSSで数値に単位がない (仕様ではΧ) Χ Χ Χ Χ Χ Χ -
4. CSSで数値と単位の間に空白文字がある (仕様ではΧ) Χ Χ Χ Χ Χ Χ -
5. CSSでキーワードが""で囲まれている (仕様ではΧ) Χ Χ Χ Χ Χ Χ -
6. ボックスにおけるwidth, heightプロパティの値 (仕様では内容領域) 内容
領域
内容
領域
内容
領域
内容
領域
内容
領域
内容
領域
内容
領域
7. font-sizeプロパティの標準サイズ (仕様ではmedium) medium medium medium medium medium medium medium
8. margin:autoでのブロック要素がセンタリング (仕様ではΟ) Ο Ο Ο Ο Ο Ο Ο
9. img要素におけるpaddingプロパティのサポート (仕様ではΟ) Ο Ο Ο Ο Ο Ο -
10. text-align:centerで適用対象でないブロック要素がセンタリング (仕様ではΧ) Ο Ο Χ Χ Χ Χ Χ
11. テーブルセルにおける画像の配置で画像の下部に隙間が生じる (仕様ではΟ) Χ Χ Ο Ο Ο Ο -
12. テーブル内の記述にテーブル外部のスタイルが継承される (仕様ではΟ) Ο Ο Ο Ο Ο Ο -


ほぼ標準モードにおける記述の適用

記述 ie6ie7ff3o9sf3N7Mac
ie5
11. テーブルセルにおける画像の配置で画像の下部に隙間が生じる (仕様ではΟ) Χ Χ Ο Ο Ο Ο -
 
 

「標準モード」におけるセンタリング



HTML4.01の文法上は大間違いになりますが、非推奨なマーク付けが基本的に無視される「標準モード」において、非推奨なマーク付けを禁止するStrictなDTDの宣言を行い、center要素div要素によるセンタリングをマーク付けした際にも、ie8 ff3 o9 sf4 gc2 N7各ブラウザにおいてセンタリングが行われます。 *1 本来的には、HTMLのバージョンを示す<!DOCTYPE>によって、マークアップ分けすべきです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">  <!--HTML4.01 Strict DTD (厳密型)-->

<center>こんにちは</center>          <!--HTML4.01非推奨-->

<div align="center">こんにちは</div> <!--HTML4.01非推奨-->

<table border="1" align="center">    <!--HTML4.01非推奨-->
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>


ブラウザの「標準モード」におけるセンタリングは、一般的にスタイルシートを用います。ブロック要素内のインライン要素に対してはtext-align:center、ブロック要素に対してはmargin:autoを用いて行います。
<div style="text-align:center">こんにちは</div>

<div style="margin:auto; width:50%; background:#eee;">こんにちは</div>
 
トップページ HTML Note ページトップ
 2008/10/01発行 2009/09/01更新