スタイルシートoverflow:hidden;の動作について
昨日のバグの背景に以下のように書きました。
画像ボックス要素のスタイルのpositionプロパティ値がstatic、または無指定の場合に、position=relative、top=0px、left=0pxとする処理をVer1.04で追加していた。
何故こんなことをしたのか、というお話です。
theater.js(簡易版)では利用していませんが、正式版(製作中)では画像をドラッグして動かすことが可能となっています。(GoogleMapのような動作。後でサンプルURLを載せます) このとき、画像ボックス(DIV要素)にスタイルシートoverflow:hidden;を設定して、画像のボックスからはみ出した部分を表示しないようにしています。
ですが、Ver1.03ではみ出した部分が表示されるようになっていまいました。原因を調べたところ、DOCTYPE宣言を修正したことにより、解釈モードがQuirks modeからStandards modeへ変わったのが影響しているようでした。(文書型宣言と解釈モード参照)
このとき、ドラッグする関係上、画像はスタイルシートposition:relative;でしたが、親要素である画像ボックスのスタイルシートpositionは無指定でした。これをposition:relative;にしたところ、はみ出た部分が表示されなくなりました。(IEとNNで確認)
解釈モード | 親要素 | 子要素の親要素からはみ出た部分 |
---|---|---|
Quirks | positionは不問 | 表示されない |
Standards | position:static;(OR無指定) | 表示される |
Standards | position:relative(OR absolute); | 表示されない |
※子要素はすべてposition:relative OR absolute;overflow:hidden;
どうやら、Standards modeではposition:static(無指定)と、relative、absoluteでは表示時の要素の扱いが違うようですね・・・。