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

2011年5月28日2011年5月29日

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

<div id="soto">
  <div id="naka">
    <img src="hoppi.png" height="200" width="200"/>
  </div>
</div>

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

#naka {
  width:100px;
  height:100px;
  text-align:center;
  position:relative;
}

#soto {
  width:80px;
  height:90px;
  overflow:hidden;
  float:left;
  background:#fff;
}

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

 

 

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

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

今後の調査課題。