internet explorer 8 - portable - IE 8 elemento posicionado absoluto fuera de su problema de recorte principal

windows 2003 server internet explorer

Question

Tengo un div posicionado absoluto dentro de otro div posicionado absoluto. El contenido del div hijo es mucho más grande de lo que el padre puede contener. Esto es por diseño. Necesito que el div niño se derrame de su padre. Lo hace en todos los demás navegadores, excepto en IE 8 (IE 7 se ve bien, no estoy seguro) En IE8, la parte del hijo que está fuera del padre está recortada. Está ahí, pero simplemente no es visible, ya que las herramientas de desarrollo de IE pueden verificarlo. Probé el índice z, intenté establecer explícitamente el desbordamiento: visible, sin suerte.

ACTUALIZACIÓN: Descubrí que el problema se debe a un filtro definido en la división principal como este:

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

¿Alguien tiene una idea de cómo trabajar alrededor de eso?

Answer 1

Intente hacer que los elementos dentro de la posición del elemento position:relative absoluto position:relative , y / o agregue una envoltura alrededor de todos los elementos en ese elemento posicionado absoluto y lo relacione.

Answer 2

Lo resolví usando esto. ¿Cómo evito que el filtro de gradiente de propiedad de Internet Explorer deje de cortar el contenido que debería desbordarse?

Mi solución está un poco modificada, solo coloque un div vacío con la clase "ie_rgba_fix" dentro del contenedor que quiere que sea transparente, agregue este CSS en algún lugar específico de IE y los niños no se cortarán más como con el desbordamiento: oculto

/* 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 3

Tomé una sugerencia de la respuesta marcada aquí y la pregunta vinculada, pero no quise usar un DIV vacío (especialmente porque otros navegadores no lo necesitan).

En su lugar, configuro el CSS específico de IE8 que usa el contenedor DIV :before pseudo-elemento.

Sin embargo, los pseudo-elementos son contenido con estilo , no objetos DOM, por lo que la propiedad -ms-filter es inútil. Para comprometerme, uso un PNG que coincide con el filtro original que quería (en realidad, un data: URL, pero cualquiera de los dos funciona) como background-image .

fuerzo el pseudo-elemento al tamaño completo del contenedor, la posición absoluta y ta-da , el elemento secundario es visible fuera del elemento principal y el elemento principal sigue obteniendo 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%;
}