IE7’de Overflow Hidden Sorunu

Bu sorunla bir çok kez karşılaştım.. Hep bir şekilde çözdüm ancak sorunun tam olarak neden kaynaklandığını ve nasıl çözdüğümü bir türlü bulamıyordum.. Neyse ki bu gece buna bir son verdim ve adam akıllı sorunu anladım, çözdüm ve mutluyum  Şimdi bu sorun nasıl oluşuyor önce ondan bahseseyim..

Sorun nasıl oluşuyor?

Normal şartlarda kapsayıcı nesneye overflow: hidden verdiğinizde belirlediğimiz genişlik ve yükseklikten taşan her şeyi gizlemesi gerekir.. Bir yere kadar bu şekilde gizleniyor.. Ancak kapsayıcı nesne içindeki nesnelerden herhangi bir tanesine position tanımı yapılırsa.. İşte o zaman işin rengi değişiyor! O zaman taşınca gizlemesi gereken ie, gizlemekten vazgeçiyor.. Bu sorun IE7 ve muhtemelen alt sürümleri için geçerli.. IE8‘de böyle bir sorun yok.

Çözümü nedir?

Çözümü basit, overflow: hidden verdiğimiz kapsayıcı dive birde position: relative tanımı yapmamız yeterli.. Böylece taşan position tanımlı bir nesne bile olsa gizlenecektir. Kısaca şöyle bir kod yapımız olduğunu düşünürsek;

<div class="box_container">
    <div class="box"></div>
</div>

Bunun ie7 ve alt sürümlerinde gizlenmeyen css kodları şöyledir;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve çözümü ise .box_container’a position: relative tanımını yapmaktır. Yani;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green;
    position: relative
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve işte hepsi bu kadar! ie7 ve alt sürümlerinde çalışan demosuna aşağıdan ulaşabilirsiniz..