css - para - ¿Cómo puedo evitar que el filtro de gradiente de propiedad de Internet Explorer corte el contenido que debería desbordarse?

internet explorer no respeta css

Question

Estoy usando el filtro de degradado de Internet Explorer en mi CSS.

Todo iba bien hasta que me di cuenta de que las imágenes que supuestamente debían extenderse más allá de sus contenedores se overflow:visible; se recortan como si el contenedor estuviera configurado para overflow:hidden;

No tengo idea de por qué sucedería esto, o cómo solucionarlo. ¿Alguien puede ayudar?

Lo estoy viendo en IE8 y IE7.

Este es el css que causa el problema, cuando lo comento, no hay más errores:

.box{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=''#b4cfe9'', endColorstr=''#e4eefc''); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=''#b4cfe9'', endColorstr=''#e4eefc'')"; /* IE8 */
}

Answer 1

Esto funciona, aunque es un margen de beneficio adicional.

<div id="box_that_wants_a_gradient">
<div class="gradient_background_1"></div>
<div class="gradient_background_2"></div>
My content
</div>

Hay una ventaja a esta táctica, ya que puede agregar múltiples cuadros de degradado y establecer sus alturas / anchuras como un% del padre, emulando así el comportamiento de "parada de color" permitido en safari / moz.

Por ejemplo:

<style>
#box_that_wants_a_gradient {
position:relative;
display:block;
height:100px;
width:100px}
.gradient_background_1 {
position:absolute;
height:20%;
*cbf writing out microsoft filter code*;
top:0;
width:100%;
left:0px}
.gradient_background_2 {
position:absolute;
height:80%;
*still cbf writing out microsoft filter code*;
top:20%;
width:100%;
left:0px}
</style>

Answer 2

Esto puede ayudar a aquellos que eligen abandonar el soporte para IE7.

IE7 siempre tendrá un problema si el elemento está posicionado (relativo / absoluto / fijo). En IE8 +, el problema desaparece si el índice z se establece en automático .

Si necesita admitir IE7, o si necesita apilar cosas utilizando z-index, debe conformarse con un segundo envoltorio DIV.

<div class="position_me_and_stack_me_with_z-index">
<div class="give_me_a_filter">
Content goes here
<div>
</div>

Editar 2012-05-29: He creado un ejemplo para mostrar cómo solucionar este problema. Creé el ejemplo para resolver un problema de apilamiento del índice z ... y resultó que también solucioné este problema ( http://jsfiddle.net/ryanwheale/gz8v3/ ).

Answer 3

Puse la posición de los padres div en relativa y funcionó :) (o absoluto, funciona bien también)

Answer 4

Sé que esto no responde a tu pregunta en particular, pero considera a tu audiencia. ¿Todos son solo usuarios de Internet Explorer o representan proporciones naturales de usuarios de Internet? Si no son solo usuarios de IE (tal vez en una red corporativa / educativa), considere usar solo los métodos que cumplen con los estándares y permita que la aplicación / sitio se degrade correctamente a un navegador que no lo admita, como IE.

Ahora, por tu pregunta. La razón por la que no funciona como esperaba es que el cuadro no se extiende hasta el final del contenido, incluso cuando el desbordamiento es visible . El contenido simplemente "camina" fuera de la caja, pero esto no hace que la caja sea más grande. No hay forma de que la caja se extienda para adaptarse al contenido, a menos que no se establezcan las propiedades de ancho y / o altura fijas . De hecho, IE tenía un error en el que, en lugar de desbordarse, la caja se extendía (esto era un error).

Sin embargo, puedo recomendar un consejo; use min- <ancho / alto> y max- <ancho / alto> en lugar de ancho y / o alto . Te permiten dimensionar cajas flexibles, con límites guiados.