overflow

cssである要素からはみ出した部分に対してどう処理をするか、を決める。

例えば、ある

>|html|
<div id="hoge">
<img src="hogehoge.jpg" />
</div>
||<

ってdivの中でhogehoge.jpgがdiv#hogeよりも横幅と縦幅が大きいとき、はみ出し部分をどうするのか？

>|css|
#hoge {
overflow:hidden;
}
||<

こうするとはみ出した部分をかくして表示させない。
他にも

>|css|
#hoge {
overflow:visible;//可視化
overflow:scroll;//スクロールさせる
}
||<

とかがある。

IE7とIE6

んで、こまったのがIE6とIE7でうまくこれが動作しないこと。
overflow:hidden;にしてるのに、全然見えちゃうんだわ、これが。

色々調べてみたら、原因が2つあるらしい。

1.属性のposition:relative;にしているとダメ
2.IE6ではwidthとheightをしっかり指定しないとダメ

んで、今回のケースでは(1)に該当してました。

まぁ、今回はposition:relative;でleftをjQueryのanimateで変えてただけなので、ちょっと腹は立ちますがleftをmargin-leftにしたら上手く隠れてくれました。

いやー、まぁ複雑なスクリプト書いたあとに気づいたらめっちゃめんどかったので、今回勉強できてよかったっす。