IE7用CSSハック使用上の注意（特にはてなダイアリーにおいて）
2006-10-25 追記。IE7正式版で挙動が変わりました。ベータのときは無効にされていたアンダースコアハックが、後方互換モードにおいて有効になりました。標準準拠モードでは無効のままです。このためこのエントリーでとりあげたはてなダイアリーでのレイアウト崩れの問題は、正式版では発生せず、問題ではなくなりました。
2006-11-03 追記。取り急ぎのまとめ。→IE7でCSSレイアウトが崩れる原因でありそうなこと - KAZUMiX memo
IE7 Betaはすごい勢いでシェアを伸ばしているようである。オレが愛用しているOpera 9を抜き去るのも時間の問題と言う勢いだ。*1そんなわけでいつまでも無視するわけには行かなくなってきたIE7の問題。IE6やそのほかのブラウザでは問題ないが、IE7では表示が崩れれてしまうCSSの対策などを調べているうちに面白いことが分かった。*2
IE7の後方互換(Quirks)モードはアンダースコアハックの使えないIE6の後方互換モードだと思え
最初IE7で表示の崩れるページはIE7のみに適用されるCSSハックを使って対処すればいいと思っていた。例えば以下のページで紹介されているような方法だ。
しかしこれらがどうしてもうまくいかないサイトが出てきた。ここ「はてなダイアリー」だ。IE7のみに適用されるはずのCSSが無視されてしまうのだ。そういえばはてなの出力するhtmlはIEを後方互換モードにさせる。もしやと思いテストに使っていたはてなダイアリーが出力したhtmlのDOCTYPE宣言を、IEが標準モードで動作するように書き換えてみた。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ビンゴ！標準モードならIE7を考慮したCSSハックも問題なく使える。しかし後方互換モードでは使えない。つまりモードによって使えるハックが異なるのだ。*3
さてそうなるとどうしたら良いのだろうか？特に実際に後方互換モードとなるこのはてなダイアリーの場合は切実な問題である。今までは以下のプロセスでテーマを制作していた。
この方法はOperaやFirefox,Safariも意図したとおりの表示にしやすい点で優れていた。しかしIE7を前にしてアンダースコアハックを封じられた上に、IE7のみに適用されるハックも後方互換モードでは使えない。
…絶望した！はてなの出力するhtmlとIEの挙動に絶望した！
IE7の後方互換モードはアンダースコアハック以外のIE6用のハックが使える
絶望し続けててもストレスが溜まるだけなので、結局様々な検証をしてしまった。そして以下のことが分かった。
そう、アンダースコアハックのお手軽さを前にスルーされていた以下のハック、これがIE7でも後方互換モードであれば普通に使えるのだ。
* html {}↑これだ。IE6以下に適用されるハックとして認知されているが、IE7でも後方互換モードであれば適用されるのだ。
例えばアンダースコアハックを利用して以下のように記述していた部分があるとする。
.hatena-body {
width: auto;
_width: 100%;
position: relative;
padding-left: 256px;
padding-right: 16px;
}これを後方互換モードのIE7にも対応させるには、その下に以下の記述を追加すればよいのだ。
* html .hatena-body {
width:100%;
}例えばIE7でサイドバーの表示が崩れるテーマ「Pastel-Liquid」や「Delta」は上記の記述を追加するだけで解決する。*4 *5
{height:1%;}もIE7後方互換モードならIE6と同じ挙動
htmlの構造をいじらずにfloatをclearするために、今までは以下の方法を利用するのが一般的だった。
これはIE7標準モードでは{overflow:hidden;}で対応することになるのだが、後方互換モードIE7の場合これは使えない。しかしその後方互換モードであれば{height:1%;}がそのまま使えてしまうのだ。
