たまたま、IE6でmargin
プロパティによるセンタリングが再現できたので、原因を調査。
いままで、IE6(以前)ってmargin: auto
でセンタリングできないと思い込んでいたんだけど、XML宣言と文書型宣言(DOCTYPE宣言)によるみたい。で、よくよく調べて行くとこれもバグかよ・・・
これらは、(X)HTML文書の冒頭で宣言されます。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>文書型宣言のテスト</title>
〜
XML宣言はこんなやつ。
<?xml version="1.0" encoding="Shift_JIS"?>
DOCTYPE宣言はこんなやつ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
"-//W3C//DTD HTML 4.01 Transitional//EN"
が公開識別子
"http://www.w3.org/TR/html4/loose.dtd"
がシステム識別子
で、表示に関わってくるのはXML宣言の有無と、システム識別子の有無です。
(それぞれの詳しい説明はここでは省略します)簡単にいうと、
・XML宣言があると、DOCTYPE宣言に関わらず後方互換モードでレンダリングされる。
・システム識別子があると、標準モードでレンダリングされる。
※標準モードは厳格なHTML文法が必要で、非推奨タグは使用できません。後方互換モードは古い文法でも柔軟に解釈してくれます。
ちょっとテスト。Firefox はそもそもCSSを正しく解釈しているのでどんな宣言をしても同じです。
1.DOCTYPE指定無し
http://www.110chang.com/doctype/test.html
後方互換モードとして解釈しているようです。
2.DOCTYPE指定(HTML4.01 後方互換モード/システム識別子あり)
http://www.110chang.com/doctype/test-tran.html
後方互換モードのはずが、標準モードでレンダリングされているのでmargin: auto
が正しく解釈されています。
3.DOCTYPE指定(HTML4.01 標準モード/システム識別子あり)
http://www.110chang.com/doctype/test-strict.html
4.XML指定+DOCTYPE指定(XHTML1.0 標準モード/システム識別子あり)
http://www.110chang.com/doctype/test-xhtml.html
XHTML1.0 標準モードのはずが、後方互換モードでレンダリングされているので margin: auto
が正しく解釈されていません。
ということは、IE6が標準モードでレンダリングしてくれるようにDOCTYPE宣言すれば、margin
でセンタリングできるってことだ。mac版IEでfloat
プロパティが意図した動作をしたり、しなかったりするのもこれのせいか? でも、今後標準になるであろうXHTMLで再現できないというのは痛いですね(XHTMLではXML宣言が必須)。IE6がデファクトスタンダードである以上、正しいXHTMLは使えないってことでしょうか。