[html]DOCTYPEとレタリングモードの関係
最近ブログ等によってDOCTYPEを宣言するようになってきましたが、一昔前のサイトは宣言されてないものが多くブラウザによって型崩れして表示される場合がよくあります。
ブラウザの表示モードは標準モードと互換モードがあり、それを区別するためにDOCTYPEで宣言する必要があるんですけど、もしDOCTYPEを宣言し忘れた場合には互換モードで表示されます。
その互換モードにも2種類あってwidthプロパティにborder+paddingを含める表示法(border-box)と含めない表示法(content-box)があり表示の型崩れに大きな影響がでます。
そのためブラウザによって表示モードが異なってしまうのでDOCTYPE宣言とレタリングモードをまとめておく。
DOCTYPEの宣言なし
- 互換モード(border): win IE6, 7beta, opera8, mac IE5
- 互換モード(content): firefox, netscape7, safari
HTML4.01
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- 標準モード: win IE6, 7beta, firefox, netscape7, opera8, safari
- 互換モード(border): mac IE5
HTML4.01 Strict
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 標準モード: win IE6, 7beta, firefox, netscape7, opera8, safari, mac IE5
HTML4.01 Transitional
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- 互換モード(border): win IE6, 7beta, opera8, mac IE5
- 互換モード(content): firefox, netscape7, safari
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 標準モード: win IE6, 7beta, firefox, netscape7, opera8, safari, mac IE5
XHTML1.0 Strict
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 標準モード: win IE6, 7beta, firefox, netscape7, opera8, safari, mac IE5
HTML:
-
<?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 標準モード: win IE7beta, firefox, netscape7, opera8, safari, mac IE5
- 互換モード(border): win IE6
XHTML1.0 Transitional
HTML:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 標準モード: win IE6, 7beta, firefox, netscape7, opera8, safari, mac IE5
HTML:
-
<?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 標準モード: win IE7beta, firefox, netscape7, opera8, safari, mac IE5
- 互換モード(border): win IE6
上記を見る限り、標準モードで統一されたDOCTYPE宣言は
- HTML4.01 Strict
- HTML4.01 Transitional loose.dtd
- XHTML1.0 Strict xml宣言なし
- XHTML1.0 Transitional xml宣言なし
となります。
やはり、IEのレタリングモードがおかしいのが分かりますね。
Loading ...
