たまたま、IE6でmarginプロパティによるセンタリングが再現できたので、原因を調査。

いままで、IE6(以前)ってmargin: autoでセンタリングできないと思い込んでいたんだけど、XML宣言と文書型宣言(DOCTYPE宣言)によるみたい。で、よくよく調べて行くとこれもバグかよ・・・

これらは、(X)HTML文書の冒頭で宣言されます。

1
2
3
4
5
6
7
<?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宣言はこんなやつ。 html <?xml version="1.0" encoding="Shift_JIS"?>

DOCTYPE宣言はこんなやつ。

1
<!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は使えないってことでしょうか。

参考:
DOCTYPE宣言について
ブラウザ別 DOCTYPE 表示モード表