あなたのウェブページに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標準でレンダリングします。
===リファレンス