あなたのウェブページにDOCTYPEを宣言したことを覚えておいてください
一般に、 ”
DOCTYPE
“タグは、Webブラウザにw3cの規則に従ってWebページを検証または処理する方法を指示し、一部のWebブラウザ（特にIE）が “http://en.wikipedia”にならないようにします。 org/wiki/Quirks__mode[Quirksモード]”を選択します。
Quirksモードは災害です
奇妙なモードがウェブページをどのように混乱させるかを知る例を考えてみましょう。
「DOCTYPE」が宣言されていない単純なHTMLコード。
<html>
<head>
<style type="text/css">
#page{
width:700px;
margin:0 auto;
}
#header{
border:1px solid blue;
height:80px;
margin:8px;
}
h1{
padding:16px;
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>No DOCTYPE declared!</h1></div>
</div>
</body>
</html>
”
margin:0 auto;
“はヘッダーブロックをページ中央に自動配置し、IE7,8、Firefoxでサポートされます。試してみよう。
-
Firefox – Firefoxでページを表示してもうまくいきます.
-
IE8 – ** IE8でページを表示すると、中央の配置はできません
ワーキング** 。
ここに問題があります、IE8は ”
margin:0 auto;
“をサポートしていますが、なぜ機能していませんか？これはあなたのIE8が “http://ja.wikipedia.org/wiki/Quirks__mode”という簡単なモードになっているからです。それはあなたのウェブブラウザを下位互換性モードに変えて、あなたのウェブページをIE6モードでレンダリングすることを意味します。
IE6の最優秀賞は世界最悪のWebブラウザであり、うまく設計されたHTMLレイアウトが変わってしまわないようにするだけです。自動マージンの横に、CSS要素の何百もIE6でサポートされていない、今あなたはDOCTYPEの重要性を参照してください？
宣言されたDOCTYPE !!!
IE8が ”
Quirks mode
“にならないようにするには、HTMLコンテンツの前にDOCTYPEタグを宣言する必要があります。例えば、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> ... </head> </html>
再度IE8で見てみると、中央の位置合わせがうまくいきます。もういや
“Quirksモード”では、WebページをIE8標準でレンダリングします。
===リファレンス
