書籍風CSS調整:今日の進展

CSSバグ辞典を見直したところ、IEの不審な挙動全てについて回避方法を発見。

フロートの左右マージンが指定値より大きくなる
回避方法不明につきマージンを指定しない方針で。
フロートの上部に祖先要素の上ボーダーを表示する
祖先要素にtransparentでない背景色を指定すれば直る。はみ出た部分の枠線が背景色で上塗りされるのを嫌って透明にしてあったのだが、取り敢えず設定。はみ出なければ問題はないわけだが。
フロートを含むボックスのマージンが無視される
問題のフロートを含むボックスのwidthプロパティにauto以外の値(取り敢えずウィンドウ幅から左右マージンを引いた値とした)を指定することで左右マージンは解消されたが、上マージンはもう一つの解決策である「問題のフロートを含むボックスの上パディングに0より大きい値を指定する」でも解消ならず。まあ判読性に影響はないので放置。

問題は、IECSS仕様/Gecko系とのwidth解釈の違いである。本来margin・padding・borderを含まない、BOX要素の内容そのものの幅を示すべきwidthを、IEはそれら要素を全て含んだ幅で計算する。その為IEでは予定したよりも幅が狭くなってしまい、脚注がページ枠より外にはみ出してしまった。
奇妙なことに、Opera7.23でもwidthをIE同様に処理している。もうちょっと解釈の妥当なブラウザだと思ったのだが…うーむ。

ともあれ、これで(必ずしも望んだ表示を再現しきっては居ないものの)ほぼ全ての主要ブラウザで問題なく表示できそうだ。
取り敢えず、MacIEで本文がかなり右寄りに表示され、かつ脚注が適正位置になくコメントと被ってしまうこと、なぜかOpera7.5でdiv.mainを完全に無視するためとても見られた表示ではないこと、この2ブラウザを除けばまずまずの成果と言える。