ブログのデザイン -- IE 対策

このブログ clmemo@aka のデザインの骨子は、[2005-06-06] に Green Witch という名前で作られた。その後、 最小幅を設定したり、 右サイドバーに折畳み式のコンテンツを作ったりと少しずつ進化してきた。ただ、デザインの確認は firefox だけでやっていて、IE のバグを考慮に入れてなかった。

たまたま、IE でブログを見直してみたところ、レイアウトがえらく崩れているのにびっくり。というわけで、IE のバグ対策を二点行ったのでメモっとく。

問題

IE6 でこのブログを見ると、右サイドバーがメイン・コンテンツの右端から押し出されて、本文の一番下に配置される。これは、次の二つの問題に起因する。

1. IE6 が min-width をサポートしない問題
2. IE6 が 内側のボックスの大きさに合わせて外側のボックスの width を広げてしまう問題

min-width をサポートしない問題について

firefox で見ると、メイン・コンテンツの横に白い帯が見える。これは、単なる飾り。作り方は、「 最小幅の設定」を参照されたし。

問題は、この飾りを作るために width にパーセント指定と px 指定が混ざっていること。

#main-content {
  width: 61.8%;
  float: left;
  margin: 0 1% 0 2%;
  border-style: none double;
  border-width: 18px;
  border-color: #eee;
}

#sidebar {
  float: left;
  width: 28%;
}

そのため、ブラウザーのウィンドウ幅を狭くすると、width が 100% を越えて、(結果) 右サイドバーが下に落ちてしまう。そこで firefox では最低の window 幅を CSS の min-width で指定していた。IE は min-width をサポートしないから、この解決策は使えない。

問題になっているのは border-width の px 指定だから、IE にはボーダーを設定しないことで逃げる事にした。見栄えが好みと合わなくなるけど、サイドバーが下に落ちるよりはまし。

IE だけ CSS を適用させないようにするのに、IE の独自実装 Conditional Comments を利用した。Conditional Comments を使うと、

<![if expression]> HTML <![endif]>

のように書いて、if 文にマッチするブラウザーだけ HTML を表示させられるようになる。

今回の場合、IE だけボーダーの設定をしないようにしたい。具体的には CSS ファイルの該当部分からボーダーの設定を取り除き、 Blogger のテンプレートに次のコードを追加した。

 <![if lt IE 5]>
  <style type="text/css">
    #main-content {
      border-style: none double;
      border-width: 18px;
      border-color: #eee;
    }
  </style>
 <![endif]>

if 文の意味は、IE のバージョンが 5 以下ならボーダーの設定をする、というもの。

内側のボックスの大きさに合わせて外側のボックスの width が広がる問題

簡略化した次のコードをごらんあれ。

<div style="width: 100px;">
 <pre>
   ...
 </pre>
</div>

上の例では、div 要素が pre 要素を囲んでいる。そして外側の div 要素には 100px の横幅が設定されてる。問題は pre 要素の中身のテキストが横長く、100px を越えた場合に起きる。

。 firefox のような標準に準拠したブラウザーは、100px 超過分のテキストは div のボックスを飛び出る形で表示する。ところが、IE は超過した分だけ外の div ボックスの width を広げてしまう。もし、pre の内側のテキストが 120px なら、div の width も (CSS の設定を無視して) 120px になる。200px なら、div の width は 200px。テキストの幅がブラウザー・ウィンドウの幅と同じ位い広いと、div もブラウザー・ウィンドウの幅と同じ位い広がっちゃう。そんなことになれば、右サイドバーの在るべきスペースは当然なくなるから、結果下に落ちることになる。

この解決策として、pre 要素に幅を設定してそれより大きな width を取る場合はスクロール・バーを表示させる方法がある。それを CSS で指定するには overflow: scroll とする。ただ、この問題は IE だけの問題だから、この設定は IE にだけ指定したい。というわけで、 Blogger のテンプレートに次のコードを仕込んだ。

 <!--[if IE]>
   <style type="text/css">
    pre {
      width: 450px;
      overflow: scroll;
    }
   </style>
 <![endif]-->

Conditional Comments で IE にだけコードを適用。ただし、このコードは IE の独自拡張だから、 firefox らのために <!-- --> で Conditional Comments そのものをコメントアウトする。

さあ、これで IE でもレイアウトが崩れないはず。どうかな?