IEで overflow: hidden と、 position: relative。

IE6 で、overflow: hidden が上手くいかないケース。。っというか、Firefox と挙動が違うので、苛立った件。

#wrapper {
  background: #fcc;
  border: 1px solid gray;
  overflow: hidden;
  width: 50px;
  height: 50px;
}
#container {
  background: #ccf;
  border: 1px solid gray;
  position: relative;
}

<div id="wrapper">
  <div id="container">
    <span>aaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

Firefox だと、ちゃんとoverflow: hiddenで、範囲外の部分が切り落とされるのだが、、IE6 だと、、切り落とされない。。しかも、面白い事に、width と height を、0px 指定すると IE6 でも、隠される。。。ちなみに、1px 指定だと全部表示される。。
何故かと原因を探していたら、id=container の、position: relative が原因らしい、、何故だ？？ position: static にすると、正常な動作をするみたい、、、。。

追伸：Hash Mitz先生へ
メッセージ頂いていたのに返信しなくて、すみません、、今度、fieldset の件も合わせて機会のあるときに、いろいろお聞きいたします。。宜しくお願いいたします(><)
って、これメッセージ返信すればいいじゃん、、orz