IE標準モードとclearfix

先日MTで作業をしていると、
IE6以下でヘッダーとフッター以外のコンテンツ部分が消失しているという事態に遭遇。
ソースを見るとコードは確かにあるのですが、なぜか見えない。なぜか。

ネットで調べると、テンプレートの改行するしないが表示に影響する？とのこと。
さっそくやってみようと思っていたところ、
「CSSが原因じゃない？」と同僚に言われ。

そのとおり、でした。

ヘッダー内のフロートがclearされていなかったため、その下のコンテンツ部分が消失してしまったようです。

フロートを上手く解除する方法に、clearfixっていうのがありますが、
最近はclearfixではなく、display: inline-block; のみを指定していて、特に問題がありませんでした。
私によるclearfix

ちなみにclearfixは、floatしてるボックスの親要素に指定します。

今回のMTブログでも、親ボックスにdisplay: inline-block;を指定して解決！と思っていたのですが、そうはなりませんでした。
理由は、「DOCTYPEスイッチによりIE6が標準モードになっていた」から。

補足を入れると、DOCTYPEというのは、HTML文書の先頭につける、文書型のことです。このDOCTYPEの記述が変わることによって、ブラウザの表示が変化するので、DOCTYPEスイッチと表現されているのではないかなという解釈です。

詳しくは、hxxp.jpさまのリソースをご確認ください。

実は、今までXHTMLでサイトを作るときはほとんどXML宣言をつけていたので、
IE6以下では表示が互換モードだったんです。それを見越して今まで制作していました。
が、MTテンプレートはXML宣言がついていないため、IE6では標準モードになります。
よって、ちょっと表示が異なっていたのですね。

そこで、display: inline-block;に加えてheight: 1%;
（たぶん、何かしら高さを指定すればOK）を指定したら直りました。

解決。

---

P.S　アドバイスくれたlevaさんありがとう。