Box Model - IE6 と IE7
標準準拠モード&後方互換モード
"Box Model ハック"で書いたように、WindowsのIE5.xにはBox Modelにバグがある。
IE6そして、IE7ではこのバグは修正されているが、意外に落とし穴になるのが、ブラウザの表示モード(Render Mode)。
最新ブラウザはDOCTYPE 宣言の有無や種類で大きくわけて2種類の、標準準拠モードと後方互換モード、表示モードを切り替える。
DOCTYPE宣言とは、HTML文書の1番最初の行に追加する、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
など。
しつこいようだが、IE6ではDOCTYPE宣言は何があろうと、HTML文書の最初の行に追加する必要がある。
きちんとDOCTYPE宣言を行っているのに、IE6で後方互換モードに切り替わってしまうのは、これが原因だ。
<?xml version="1.0" encoding="iso-8859-1"?>
上記のXML Prologの宣言もXML文書の最初の行に挿入しなければならないとされているが、IE6で行うと、
後方互換モードに切り替わってしまう。
IE7ではこのバグは修正されている。
IE6、IE7では、この表示モードが標準準拠モードでなければ、Box Modelの解釈をIE5.xのそれと同様に処理する。
つまり、バグが残った状態でレンダリングされることになる。
後方互換モードでの表示はBox Modelだけでなく、Tableタグ内では、Fontのサイズ、色、ファミリーなどを親要素から継承しないというバグが出現する。
よほどの事がないかぎり、標準準拠モードでの表示を嫌う理由がないので、CSSのコーディングを楽にするためにも、
HTML文書がきちんとValidateできるようにするためにも、DOCTYPE宣言を正しくしておくことを強くオススメする。
DOCTYPE宣言について詳しくはこちらを参考にしてほしい。
各ブラウザの DOCTYPE スイッチ対応表など非常に細かく検証を行った結果が紹介されている。
なお、Firefoxでは、All-In-One Sidebarを利用していれば、表示モードを確認できる。
未動作検証だが、Webmasterworld.comのフォーラムにIEで表示モードを確認するためのブックマークレットが紹介されていた。
javascript:(function(){var mode=document.compatMode,m;if(mode){if(mode=='BackCompat')m='Quirks';else if(mode=='CSS1Compat')m='Standards Compliance';else m='Almost Standards Compliance';alert('The document is being rendered in '+m+' Mode.');}})();
コメントはこちらから