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