ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

IE7でoverflow:hiddenが効かなかった話

ここのところ、ずっとIE7と戦いつづけています。
その結果、色々な別に知りたくなかったノウハウがたまる今日この頃・・。

2014年の9月にもなってIE7ネタを書くのも気がひけたんですが、同じ症状で詰まっている人が2,3人はいるだろう・・と思ったので書いてみました。

今回取り上げるネタ

「overflow:hiddenを指定した親要素内にposition:relativeを指定した子要素を配置すると、IE7ではoverflow:hiddenが機能せずに子要素がはみ出る」というものです。

対処法

この現象は「 親要素にposition:relativeを指定する 」で解決できます。

サンプル

現象を再現可能な簡単なHTMLを書くと、以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>doesn't work overflow hidden</title>
    <link rel="stylesheet" href="overflow.css">
</head>
<body>
    <div id="container">
        <p class="normal"></p>
        <p class="hidden"></p>
    </div>
</body>
</html>

#container {
    width: 400px;
    height: 400px;
    background: #eeeeee;
    overflow: hidden;
}

p {
    height: 100px;
    position: relative;
}

.normal {
    width: 100px;
    background: #aaaaaa;
}

.hidden {
    width: 600px;
    background: #aaaaaa;
}

比較的新しいIE、モダンブラウザだと何の問題もないのですが、IE7で上記のHTMLを表示すると子要素の2つ目のpタグが盛大に飛び出してしまいます。興味がある人はmodern.IEあたりで確認してみるといいかもしれません。

余談

なんでこれで上手くいくのかを調べてみたんですが、結局よくわからず（さじ投げ）。
SMACSSの作者の方が7年前に書かれていた記事のコメントを一通りみたところ「バグじゃね？？」みたいな流れになっていたので、この辺りで調べるのを諦めました。

教えてくれ五飛・・俺はいつまでIE7対応を続ければいいんだ・・。

お　し　ま　い