Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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年前に書かれていた記事のコメントを一通りみたところ「バグじゃね??」みたいな流れになっていたので、この辺りで調べるのを諦めました。

おしまい

rukiadia
Front-end engineer in Tokyo
http://rukiadia.hatenablog.jp/
connehito
コネヒト株式会社は、「あなたの家族像を実現する社会をつくる」をビジョンに掲げる、現代社会における多様な家族像の実現を目指す会社。女性向けの「ママリ」「ママRework」や家族の購買の意思決定を支える「ママリ口コミ大賞」、男性育休冊子などを展開。
https://connehito.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away