ここのところ、ずっと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対応を続ければいいんだ・・。
お し ま い