IE6でoverflow:hiddenを使ったときに、うまくhiddenにならない

IE6 で、divタグにoverflow:hiddenを指定したにもかかわらず、中身がhiddenにならない場合がある。

といった感じのHTMLがあり、cssで、

という感じでスタイルを指定したときに、iE6では、sotoで指定したoverflow: hiddenが効かないというバグがある。
これは、どのような現象で発生するかというと、中のタグ、今回ではnakaのタグでposition: relative;を指定してる場合に
外側のタグ、今回ではsotoにposition: relative; が無い場合である。
解決する方法としては、外側のタグ(soto)にもposition:relative; を付けることで、overflow:hidden; が適用されるようになる。

 

 

という感じで、記事検証用にちょっとサンプル作ってみたが、何故かhiddenがちゃんと適用されてしまう。

ま、実際他のところでは出てて、直したので記事を書いているのだが、サンプルで再現しないのはなぜだ。。他にもhiddenにならない要素があるのかもしれない。

今後の調査課題。