IEでoverflow:hiddenを指定してるのに中身がはみ出すバグ

先日、MTからWPに乗り換えたこのブログですが、その際、トップページに「最新のレビュー記事/動画記事」をサムネイル入りで表示させるようにしました。

が、ひでさんからいただいたコメントで表示が崩れていることを知り、ちゃんと表示させるのにちょいと悩んだので、備忘録的に記事をアップします。

この部分は、写真を正方形にカットするために、CSSのoverflowプロパティを指定しています。実際のコードはこんな感じ。

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

width:240px;
height:240px;
overflow:hidden;
text-align:center;
position:relative;
left:-80px;

親ボックスで表示させたいサイズを指定して、はみ出る部分を非表示に、子ボックスで写真を左に動かして真中部分を表示させるようにしてるわけなんですが、ここに落とし穴が。

IEのバグ、バカヤロ

普通なら上のような指定で思い通りに表示されるんですが（Firefox、Google Chromeでは思い通りに）、IEだけが、overflow:hidden（はみ出した部分は非表示）を指定しているのに、非表示されずにはみ出たまま表示されちゃう。

あちこち調べたところ、子要素にposition:relativeを指定した場合に、親要素で指定したoverflow:hiddenが効かなくなるとの記事を発見。

ということで、上記の親要素に「position:relative」を追記してあげたところ、無事思い通り、写真を正方形にカットして表示させることができました。

IE8になって大分ましになったかな？とか思ってたんですが、相変わらずですね。ダメですIE。

HTML5とかCSS3とか、標準で使えるようになると、すっごくキレイなサイトを画像を使うことなく作れたりするようなんですが、IEはほとんど対応していない模様（特にCSS3）。こんなブラウザとっとと見捨てて、FirefoxかChrome使いましょう！

Tweet