水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > initial containing block

initial containing block

2001年9月4日(火曜日)

initial containing block

BODY要素直下の要素をposition:absoluteにしてbottom:0pxにすると、MacOS版IE5ではBODY要素の一番下に移動し、Windows版IE5.5とNetscape6では一番上にスクロールした状態でのウインドウの一番下に移動する。どっちが正しいのだろう。

おそらく、Windows版IE5.5とNetscape6では、ウインドウのスクロールバーはBODY要素のoverflow:scrollの効果で出てきているという事になっている気がする。つまり実際のBODY要素の大きさはウインドウの大きさしかなくて、後ははみ出している状態だと。MacOS版IEでは、ウインドウのスクロールは別途定める部分が担当しているので、BODY要素ははみ出さない状態で存在している。そう考えればどちらも正しいのだが、実装の違いで移動する位置が違うという様なことでいいのだろうか。

以上、りゅうさんの偽偽夜食日記 より

CSS2 の仕様的な言葉を使うなら、"initial containing block" が違うということになります。CSS2 の 10.1 Definition of "containing block" では以下のようになっています。

The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.

以上、CSS2 10.1 Definition of "containing block" より

要するにルート要素の containing block は UA 異存なのです。その意味では「どちらも正しい」のですが、9.1.2 Containing blocks の定義を読むと、

The width of the initial containing block may be specified with the 'width' property for the root element. If this property has the value 'auto', the user agent supplies the initial width (e.g., the user agent uses the current width of the viewport).

The height of the initial containing block may be specified with the 'height' property for the root element. If this property has the value 'auto', the containing block height will grow to accommodate the document's content.

以上、CSS2 9.1.2 Containing blocks より

initial containing block の幅はビューポートの幅に、高さは内容量全てが収まる高さにするという例が出ています。これに近い実装は MacOS版 IE5の方です。

関連する話題: CSS / CSS2 / UA / もののけ / りゅうさん

最近の日記

関わった本など