このブログ clmemo@aka のデザインの骨子は、[2005-06-06] に Green Witch という名前で作られた。その後、 最小幅を設定したり、 右サイドバーに折畳み式のコンテンツを作ったりと少しずつ進化してきた。ただ、デザインの確認は firefox だけでやっていて、IE のバグを考慮に入れてなかった。
たまたま、IE でブログを見直してみたところ、レイアウトがえらく崩れているのにびっくり。というわけで、IE のバグ対策を二点行ったのでメモっとく。
問題
IE6 でこのブログを見ると、右サイドバーがメイン・コンテンツの右端から押し出されて、本文の一番下に配置される。これは、次の二つの問題に起因する。
- IE6 が min-width をサポートしない問題
- 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 でもレイアウトが崩れないはず。どうかな?
No comments:
Post a Comment