2010-03-25 12 views
13

He subido un archivo de prueba aquí:jQuery: margen de IE8 se derrumba cuando se utiliza slideUp()/slideDown()

http://dl.dropbox.com/u/2201804/IE8test.html

Si hace clic en los "Me Haga clic en" divs, verá los divs "Feedback" aparecen usando slideDown(). Al hacer clic en "Hacer clic en mí" en otro recuadro, se desliza la información que se muestra actualmente y se desliza por los comentarios adecuados.

En IE8, después de que se completen las acciones de slideUp()/slideDown(), el margen entre las cajas colapsa.

¿Esto es un problema con la animación de jQuery o un error de visualización en IE8?

Respuesta

23

overflow: hidden;

debe hacer el trabajo :)

+1

Tuve el mismo problema en IE8, agregando desbordamiento: oculto para el elemento que crece/se encoge lo resolvió !. – DanC

+2

Esto funcionó para mí también. ¿Alguien puede explicar POR QUÉ esto funciona? ¿Es solo un error de IE? ¿IE9 hace lo mismo? – dkamins

+0

Yo también me gustaría saber POR QUÉ funciona ... ¿qué se desborda: oculto tiene que ver con los márgenes de desaparición? – Sorcy

5

No tengo una solución para usted con márgenes, pero si reemplaza el margen con relleno, IE8 seguirá el juego. En su caso, necesitaría un div contenedor adicional, porque ya está utilizando el relleno y tiene un conjunto de colores de fondo.

Así que su solución podría tener este aspecto:

<div class="assessment"> 
    <div class="inner"> 
    <div class="question"> 
... 

.assessment { 
    padding-top: 20px; 
    background: transparent; 
} 

.assessment .inner { 
    background-color:#DDDDDD; 
    border:1px solid #CCCCCC; 
    color:#555555; 
    display:block; 
    padding:10px 0; 
    text-align:left; 
    width:100%; 
} 

Saludos TJ

2

Sólo la actualización este viejo hilo con mi solución, ya que no era capaz de resolver el problema con CSS. Usé la función de devolución de llamada de slideToggle para centrarme en el cuerpo del documento porque noté que hacer clic en cualquier otro lugar de la página parecía provocar un reflujo del DOM y los márgenes regresaban.

.slideToggle(
    500, 
    function() { 
     document.body.focus(); 
    } 
); 
-1

todavía estaba teniendo problemas con los márgenes de la desaparición de esta sección de "overflow: hidden" sugerencia, y decidí simplemente desactivar la funcionalidad slideUp/slideDown enteramente en IE8 reemplazando la funcionalidad 'default' de jQuery con una función personalizada que mostraría u ocultaría el elemento, pero solo cuando se estaba utilizando IE8.

Para lograr esto, utiliza un IE conditional comment para añadir una clase para el elemento html, así:

<!--[if IE 8]><html class="ie8"><![endif]--> 

Entonces, he definido la siguiente función en mi javascript para reemplazar la función slideUp/slideDown, como entonces:

(function($) { 
    // disable slideDown/slideUp in IE8 due to margin removal issue 
    if ($('html').hasClass('ie8')) { 
     $.fn.slideDown = function() { 
      return this.show(); 
     };   
     $.fn.slideUp = function() { 
      return this.hide(); 
     }; 
    } 
})(jQuery); 

Y eso resolvió el problema para mí, en lo que a mí respecta. ¡Espero que esto ayude!

Cuestiones relacionadas