2010-09-01 19 views
13

Görünüşe Internet Explorer (sürüm 8 en azından kadar) taşma yok sayar: görünür olmak filtrelenmiş elemanı dışında bir şey neden filtre (opaklık için örneğin) uygulanarak taşma ile kırpılmış: gizli kullanıldı.Internet Explorer'ın CSS özelliği "filtre" taşma yok sayar: görünür

Bu davranış için herhangi bir geçici çözüm var mı? Aşağıda

örnek kod çocuk – sadece sağ ve alt sınırları görülebilir konteyner tarafından kırpılmış nasıl gösterir.

<style type="text/css"> 
    #container { 
    position:absolute; 
    left:100px; 
    top:100px; 
    width:100px; 
    height:100px; 
    border:1px solid black; 
    filter:alpha(opacity=50); 
    overflow:visible; 
    } 

    #child { 
    position:relative; 
    left:-10px; 
    top:-10px; 
    width:20px; 
    height:20px; 
    border:1px solid red; 
    } 
</style> 

<div id="container"> 
    <div id="child"></div> 
</div> 
+0

Ve böylece sorunuz ...? –

cevap

9

duruma çözüm basit gibi görünüyor: Kullanım -ms filtre yerine filtre daha:

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)'; 
+3

ms-filter'in sadece IE8 + 'da çalıştığını unutmayın. –

+0

Bu sadece benim için IE8'de çalışır. IE9 artık çalışmıyor. – iamwonder

2

Birincisi, ilginç bir not: IE9 doğru taşması onurlandırmak görünüyor: IE8'i taklit ederken bile görünür.

İkincisi, bu soruna yönelik genel bir çözüm, ortak bir ebeveyne ait #container ve #child kardeşlerini yapmaktır. Ortak ebeveynin filtresi yoktur (taşma doğru olarak işlev görür) ve #container'a ihtiyacınız olan filtreyi uygularsınız.

#child artık bir kapsayıcı çocuğu olmadığından, filtreniz almayacaktır. Bu bir sorun olabilir veya olmayabilir ve olası bir çözüm de aynı filtreyi #child'e de uygulamaktır. Bunun "olası bir çözüm" olduğunu söylüyorum çünkü filtreyi iki öğeye bağımsız olarak uygulamak, sonra bunları oluşturmak, öğeleri ilk oluştururken özdeş olabilir veya daha sonra bu bileşime filtreyi uygulayabilir. Filtrenin ne olduğuna ve öğelerin örtüşüp örtüşmediğine bağlıdır. Özdeş olmasa bile, "yeterince yakın" olabilir.

Son olarak, sayfanızın standart modda (doctype olmadığı zaman IE'nin varsayılan olarak ayarladığı quirks kipleri yerine) atanmış bir doctype varsa, bu filtreler, alt öğeleri sürece çocuk öğeleri için geçerli değildir. konum: statik (herhangi bir konum belirtilmediğinde varsayılan). Her iki pozisyonun belirtilmesi: mutlak veya pozisyon: çocuğa göre ebeveyn üzerindeki filtrenin çocuğa uygulamamasına neden olur. Genel olarak, bu kötü bir şeydir, ancak bir yan etkisi, taşmaya neden olmasıdır: doğru çalışması için görünür. Bu çözümü benimserseniz, filtreyi alt öğeye de uygulamanız gerekebileceği konusunda aynı sorunla karşılaşırsınız.