Elemento de posición absoluta IE 8 fuera de su problema de recorte principal

Question

Tengo un div posicionado de forma absoluta dentro de otro div posicionado absoluto. El contenido de div infantil es mucho más grande de lo que el padre puede contener. Esto es por diseño. Necesito que el niño div se derrame de su padre. Lo hace en todos los otros navegadores, excepto en IE 8 (IE 7 parece estar bien, no está seguro) En IE8, la parte del elemento secundario que queda fuera del elemento primario queda recortada. Está allí, pero no es visible, como se puede verificar con las herramientas de desarrollo de IE. Intenté z-index, intenté explícitamente desbordamiento: visible, sin suerte.

ACTUALIZACIÓN: Me di cuenta de que el problema es causado por un filtro definido en el div padre como esto:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)"; 

alguien tiene una idea de cómo solucionar esto?

Answer 1

lo solucioné el uso de este How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

Mi solución es un poco modificado, sólo hay que poner un div vacío con clase "ie_rgba_fix" dentro del contenedor que desea transparente, añadir este en algún lugar CSS IE específico y los niños no van a recortar más pues con overflow: hidden

/* IE8 RGB A workaround */ 
div.ie_rgba_fix 
{ 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)"; 
} 

Answer 2

Intente hacer los elementos dentro del elemento de posición absoluta position:relative, y/o agregue un envoltorio alrededor de todos los elementos en ese elemento de posición absoluta y su relación.

Answer 3

i tomó una punta de la respuesta aquí marcadas & la cuestión vinculada, pero no quería utilizar un DIV vacío (especialmente debido a que otros navegadores no lo necesitan).

En su lugar, configuré CSS específicos de IE8 que usa el pseudo-elemento :before del contenedor DIV.

Sin embargo, los pseudo-elementos son styled content, no los objetos DOM, por lo que la propiedad -ms-filter es inútil. Para comprometer, uso un PNG que coincida con el filtro original que quería (en realidad, una URL data:, pero funciona) como background-image.

fuerzo el pseudo-elemento al tamaño completo del contenedor, posición absoluta, y ta-da, el elemento secundario es visible fuera del elemento principal, y el elemento principal aún obtiene un fondo de transparencia.

.container.ie8 { 
    background-color: transparent; 
    position: relative; 
} 
.container.ie8:before { 
    background-image: url("data:image/png;base64,..."); 
    display: block; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}