IE6でブログのサイドバーが広がってしまう問題の解決方法

Amazon倉庫転売厨終了事件はその後どうなったのか - 空気を読まない中杜カズサを読んで。いや、正確にははてなブックマーク - Amazon倉庫転売厨終了事件はその後どうなったのか - 空気を読まない中杜カズサを読んで。

本文が読めない…。→ http://f.hatena.ne.jp/EXAPON/20080707184344 IE6.0、解像度 1024 × 768。

はてなブックマーク - EXAPONのブックマーク / 2008年07月07日

これは何が原因かというと、IE6の非常に有名なバグです。

IE6の「overflow:visible」バグ

ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)

overflow: visible; が指定されているとき（初期値）、ボックスをはみ出す内容物はボックス外に表示されると規定されているが、IEでは内容物に合わせてボックスが拡大される。

Internet Explorer (Windows) CSSバグリスト

要するに何らかの原因で、サイドバーに入れているAmazonアソシエイトへのリンクの幅が大きくなってしまって、それによって外枠のサイドバーが拡大、結果として本文まで隠れてしまっているのです。floatを使ったテンプレートならこういう現象が起こった場合、カラム落ちが起こります。しかし、その使用中のテンプレートはサイドバーを「position: absolute」で固定している(*1)ため、要素が被って見えなくなってしまうのですね。
([*1]私もはてなダイアリーで同じテンプレートを使っているのでわかる。)

CSSをちょっといじってみて(*2)意図的に同じ現象を起こしてみたのが以下の画像です。同じ状態になっていることがわかると思います。
([*2]内部のdivに親要素以上の横幅を指定して、擬似的に再現した。)

それで具体的にどうすれば解決するかというと、以下のコードをはてなダイアリーの管理画面の「スタイルシート」に書き込んで保存すれば直ると思います。

.sidebar {
	overflow:hidden;
}

先ほどの意図的に問題を起こしたCSSに上記のコードを書き込むとこうなりました。ちゃんと本文が読めるようになっています。

この3行で直る理由は以下のとおり。

• 「sidebar」はサイドバー全体を囲っているdivに付いているクラス名
• 「sidebar」には「width: 220px;」と横幅が指定してある
• 「overflow:hidden;」でサイズを超えた部分を表示しないように指定
• 内側の内容物が勝手に拡大しても220pxを超えた部分は表示されなくなるので問題解決

ちなみにこれ、IE6のみのバグかと個人的に思っていたんですが、試してみたらIE7でも同じ現象が起こりました。

IE7での表示

ただIE関係のバグなので、当然FirefoxやOperaでは問題は起こりません。

Firefox 3での表示

Opera 9.5での表示

前に試したテストではバグが修正されているようだったので、IE7では後方互換モードの場合のみ(*3)起こるのかもしれませんが、詳しく調べていないのでよくわかりません。ただ、FirefoxやOperaを使っている場合は気がつかないトラブルでしょう。
([*3]はてなダイアリーはDOCTYPEの関係で必ず後方互換モードになる。)

まとめ

• IE6は内容物によって、サイズが決められている外側のボックスまで広げてしまうバグが存在する
• それによってレイアウトが壊れたり、文章が読めなくなったりする
• 解決方法はそのサイズが決められている要素に「overflow:hidden;」を設定する

ちなみに、サイズがあらかじめ決められてない要素に「overflow:hidden;」を設定しても意味はありません。なぜなら、その状態だと内容物のサイズによって、そのボックスの大きさ自体が変化していくのが正常な挙動(*4)だからです。また、「overflow:hidden;」によって改行されない中身が読めなくなったりすることもあるので、特に問題がなければ使用しない方がいいと思います。
([*4]親要素があったりする場合はまた別。)