Internet Explorer własności CSS „filter” pomija przelewowy Widoczne

Question

Najwyraźniej Internet Explorer (do wersji 8 co najmniej) ignoruje przepełnienia Widoczne stosując filtra (np krycia), powodując niczego poza przefiltrowanego element do przycięte tak, jakby użyto przepełnienia : ukryte.

Czy są jakieś obejścia tego zachowania?

Poniższy przykładowy kod pokazuje jak dziecko jest obcięty przez pojemnika – tylko jego prawa i dolna granice są widoczne.

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

Answer 1

Wydaje się, że obejście tego problemu jest proste: Użyj -ms filtr zamiast filtr:

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

Answer 2

Najpierw jedna ciekawa uwaga: IE9 wydaje się poprawnie cześć overflow: widoczne, nawet podczas emulacji IE8.

Po drugie, jednym ogólnym obejściem tego problemu byłoby sprawienie, by twoje rodzeństwo #container i #child było we wspólnym rodzicielstwie. Wspólny element nadrzędny nie miałby filtru (co oznacza, że ​​przepełnienie będzie działać poprawnie) i zastosowałbyś filtr, którego potrzebujesz do #container.

Ponieważ #child nie jest już dzieckiem pojemnika, jednak nie otrzyma filtra. To może, ale nie musi być problem, a jednym z możliwych rozwiązań jest zastosowanie tego samego filtru do #child. Twierdzę, że jest to "możliwe rozwiązanie", ponieważ niezależnie stosuje się filtr do dwóch elementów, a następnie komponowanie może być lub nie być identyczne z komponowaniem elementów w pierwszej kolejności, a następnie zastosowaniem filtra do tej kompozycji. Zależy od tego, jaki jest filtr i od tego, czy elementy się pokrywają. Nawet jeśli nie jest identyczny, może być "wystarczająco blisko".

Wreszcie, jeśli twoja strona ma typ dokumentu, który umieszcza go w trybie standardowym (zamiast trybu dziwactwa, do którego IE domyślnie nie ma typu dokumentu), możesz zauważyć, że filtry nie mają zastosowania do elementów potomnych, chyba że dziecko ma position: static (domyślnie, gdy nie określono pozycji). Określenie pozycji: absolutna lub pozycja: względna na elemencie potomnym spowoduje, że filtr na obiekcie nadrzędnym nie zostanie zastosowany do elementu podrzędnego. Ogólnie rzecz biorąc, jest to złe, ale efektem ubocznym jest to, że spowoduje przepełnienie: widoczne, aby działało poprawnie.

Po przyjęciu tego rozwiązania wystąpi ten sam problem, który może być konieczne, aby zastosować filtr również do elementu potomnego.