スタイルシートをいじる(2)

前々回の日記でzunda氏に勧められたFireFoxのDOM Inspectorにて「FireFoxとSafariで表示がおかしくなる問題」を解析してみた。まずdivの包含関係については矛盾はなく、入れ子については意図した記述になっていることを確認。

さらに、もう少し調べてみると、左右のサイドバーとメインの本文を包括するdivの縦方向の長さが意図したように認識されていないことが判明。

具体的には、以下のような入れ子になっているのにも関わらず、totalというclass名のdivの縦方向の長さ(高さ)が、属しているmain, rsidebar, sidebarの高さより短く認識されてしまっていた。

total-+-right-+-main     本文
      |       |
      |       +-rsidebar 右サイドバー
      |
      +-sidebar          左サイドバー

"Generated by〜"の表示がある、footerというclass名のdivはこのtotalの後に配置されるので、totalが適切な高さを保っていないと、このfooterの位置もおかしなことになる。

そのために、FireFoxでは変なところにGenerated by〜が現れ、SafariではFooterのdivが中途半端な位置に配置されることで、以下の記述がばっさり切られたのではないかと推測した。

では、どのように解決したのかというと、cssのdiv.totalに以下の指定を追加してみた。

overflow: auto;

css内では<div class="total">で作られるボックスの絶対的な範囲を指定していないので、このように指定しても、表示に影響はない。ただ、ブラウザ側でこのボックスの大きさをちゃんと認識してくれるようで、DOM Inspectorで表示される範囲が適切な大きさに変わったのを確認した。

ここでも説明されているように、IEの場合は内容がはみ出した場合はボックスを自動的に拡張してくれるのだけど、それ以外では純粋にはみ出すだけのようなので、その差が現れたと考えることができる。overflow属性は意図的にその機能を使わない場合でも、おまじないとして入れておいた方がよいのかもしれないね。

ついでに、大きなポカミスを発見。div.footer内で

clear: both; ... 左右の回り込みをキャンセルするための指定

がうまく記述されていなかったのだ。この記述があるのにうまく動かないといってSafariにバグがあるものと勘違いしてしまいました(Clear属性については、一度記述すると、後で上書きしても反映されないというバグが実際にあるようです。これをClear関係にバグがあるのでは、と拡大解釈していました)。

まとめると、以下の原因でFireFoxとSafariでの表示がおかしくなっていたと考えられるのではないかと。

• <div class="footer">のブラウザ表示上での開始位置がおかしくなる
• div.footer 内のclear属性の記述ミス

以上をふまえて修正。少なくとも、IEとFireFoxは同じ表示になった。 さて、Safariでの表示はどうなったであろうか？