Firefox5 絶対配置の妙

CSSでのposition:absoluteでの絶対配置では、基準となるコンテナ（包含ブロック）は祖先のposition:staticではないブロックとなるが、それが無い場合ルート要素(html)になるはずだが、firefox5だとうまく動かない。

htmlにボーダーを設定。絶対配置はパディングエッジなのでボーダーの影響を受けるはず。

しかしこうなる。

絶対配置要素は"bbbbbbbbb"でコンテナは全てデフォルトstaticのまま。
htmlが基準となるはずだがボーダーの影響を受けていない。
この要素のCSS設定はこんな感じ。

#block2 {
　position:absolute;
　left:100px;
　top:0px;
}
"aaaaaaaaa"と"ccccccccc"はwidth:100pxなので位置の目安になるだろう。

試しにbodyにボーダーを設定してみたがこれもダメ。
そもそもbodyはデフォルトマージンが入っていてこれだと位置が変だ。

正しくは以下のようになるはず。


これをIE9で動かすと期待通りになる。どちらのブラウザかはボーダーのドットの幅で判断できる。


試しにCSS3で追加されたルート要素を指すセレクタ":root"を使用してみる。
:root{
　border: 30px black dashed;
}

Firefox5は同様に失敗。ボーダーはちゃんと引かれるのでhtmlに適用はされている。
そして今度はなぜかIE9も失敗になる。


結局どちらにも有効な手段はhtmlにposition:relativeを設定する方法。
html{
　border: 30px black dashed;
　position:relative;
}
この結果が上から2番目の成功画像。
IE9ももちろん問題ない。

このFirefoxの問題は旧バージョンからなのかなんなのか。ちょっと探してみよう。