IEではてなダイアリーのメインカラムが広がるのを防ぐCSS
はてなダイアリーの一部テーマはIEで最大幅指定が無効になる
メインで使っているFirefox(3.6, Win)に最近不具合が生じていたので、比較検証のためにIE(8)を使ってみたところ、このブログのカラムが画面の左右いっぱいに広がって表示されてしまっていることに気づいた。テーマには公式の「hatena2-black」からサイドバーを取っぱらったものを使っているので、最初はHTMLタグの閉じ忘れか何かが原因かと思ったのだが、同じく「hatena2」シリーズのテーマを使っている「はてなダイアリー日記」や、「Chikirinの日記」などメジャーなブログを見ても、やはり同様にIEで広がって表示されている。しかもはてなダイアリー日記では、リンク元の長いURLが折り返されず、ウインドウの幅を超えてカラムが押し広げられてしまっていたりする(比較スクショ→Firefox IE）。また「hatena2」シリーズだけでなく「hatena_light-blue」などのテーマでも同様の現象が見られる（例：「Hatena::Engineering」のこの記事とか）。一応その他の主要ブラウザ: Chrome(5.0), Safari(5.0), Opera(10.6)でも確認してみたが特に問題はなく、IEだけで起きる症状のようだ。恐らくカラムの最大幅を指定しているCSSに問題がありそうだということで、ど素人ながら少し調べてみた。
原因はDOCTYPE宣言の互換モードか
テーマ「hatena2-black」のCSSでは、カラムの最大幅を「max-width: 910px;」と指定している。しかし、テーマのHTMLソースを見ると、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
というDOCTYPE宣言があり、IE5と同等機能の互換モード(Quirks モード)でページが表示されるようになっていることが分かる。そのため、IE6以下で実装されていないmax-widthプロパティが無効になってしまっているようだ。
とりあえずメインカラムの幅が広がるのを防ぐ
そういうわけで、互換モードではmax-widthプロパティが使えないので、他の方法でカラムの最大幅を指定する必要がある。max-widthを使わずにリキッドレイアウトにする方法としては、IE用の「expression」というものを利用する方法が知られているが、試してみてもなぜかうまくできなかった。また、左右に配置されたdiv要素でマイナスマージンを指定する方法もあるようだが、これははてなダイアリーでは無理そうだ。結局、リキッドレイアウトは諦め、アンダースコアハック(_width)を用いて標準ブラウザでの最大時と同じ幅に固定することにした（IE6以下ではwidthに左右borderが含まれるので、910+1+1=912pxを指定）。
#simple-header,h1,.hatena-body {
margin:0 auto;_width:912px;
overflow:hidden;
}理由はよく分からないが、「overflow:hidden;」を入れておかないとウインドウサイズを変える度に文字の配置がずれてしまう（ページを再読み込みすれば修正される）。
色々調べていたらかなり時間を費やしてしまったけれども、はてなダイアリーでDOCTYPEの標準モードが選択できさえすれば、こんな面倒なことをしなくて済むのに…（Google Analyticsを見てみると、現在、訪問者の約3割がIEを使っているが、IE6はその内の約7%(≒全体の2%)なので無視できる）。まあでもCSSについてはちゃんとした専門書
もしどなたか、IEでリキッドレイアウトかつ最大幅を指定できる方法をご存じでしたら教えてください。
 | XHTML/HTML+CSSスーパーレシピブック エ・ビスコム・テック・ラボ      |
