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

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

今回取り上げるネタ

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

対処法

結論から先に書きますが、この現象は「 親要素にposition:relativeを指定する 」で解決できます。

サンプル

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

index.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>

overflow.css

#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あたりで確認してみるといいかもしれません。

このサンプルの場合は、親要素のdivにposition:relativeを設定してやればIE7でも子要素がはみ出すことは無くなります。

余談

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

おしまい