2011-12-02 9 views
18

Estoy intentando animar el deslizamiento de un menú con script. Para hacer esto, necesito animar la propiedad marginTop de un elemento e incrementarla de -30px a 0px.No se puede establecer el estilo de marginTop con secuencia de comandos utilizando IE8, pero funciona en navegadores de personas adultas

Sin embargo, en IE8, la animación simplemente no hace nada. He rastreado esto hasta el hecho de que establecer marginTop en el script parece no tener ningún efecto. En Chrome y Firefox, esto funciona bien.

He aquí un ejemplo que funciona con Chrome/Firefox, pero no IE:

http://jsfiddle.net/rm58T/2/

Es este un fallo de IE, y si es así, ¿existen soluciones para este comportamiento? ¡Gracias!

Actualización:

Aquí hay algunas capturas de pantalla del insecto.

En Chrome, mi violín se parece a esto (Se puede ver el "Nombre del nuevo menú" Texto, desde que cambiamos el margen con la escritura)

enter image description here

En IE8/Vista, que parece esta. Puedo confirmar en las herramientas de desarrollo que topMargin es en realidad 0px como se esperaba, sin embargo los elementos no fueron re-dibujados:

enter image description here

Otro Actualización:

repros este error (al menos para mí) en IE8 ejecutándose en Windows 7, y también IE8 ejecutándose en Windows 2008 Server. NO repro para mí en IE7 corriendo en WinXP. No tengo ninguna máquina IE9 para probarlo.

otra actualización:

encontré una potencial solución temporal. Si configuro p.newmenu en position: absolute; en lugar de position: relative;, entonces funciona. Sin embargo, en mi caso estoy alojando todo esto en un menú emergente y necesito este control para presionar la parte inferior del cuadro de diálogo modal, por lo que posicionarlo definitivamente no es una opción. Sin embargo, tal vez este conocimiento puede ayudar a encontrar una solución viable. Se puede encontrar un ejemplo de este trabajo en here.

usted puede creer que otra actualización ?:

me hizo encontrar una solución por ahora. Si uso top: -30px; en lugar de un margen superior negativo, entonces todo funciona. top se comporta de una manera un poco diferente que un margen, y hace que la interfaz de usuario no se vea tan bien. En particular, cuando usa top: -30px, tendrá 30px de espacio en blanco debajo de su elemento, ya que el posicionamiento relativo no afecta el flujo de otra página.

Me gustaría averiguar por qué no puedo usar un margen superior negativo en IE como puedo con otros navegadores, por lo que aún espero que alguien pueda proporcionar una respuesta que proporcione todos los beneficios de un margen superior negativo, pero también funciona con IE8.

+8

+1 para el título por sí solo –

+0

Gracias :) Estoy empezando a aceptar el hecho de que mi sitio es probable que con tan sólo mirar como el culo en el IE. –

+1

Dependiendo de quién sea su audiencia esperada, eso aún podría funcionar –

Respuesta

2

El desencadenante de este comportamiento es cómo IE8 maneja el elemento fieldset.

Puede solucionarlo configurando la pantalla de fieldset en línea (o en línea).

div.modal.addmenu fieldset { 
    display: inline; 
} 
+0

Gracias! La pista 'inline-block' definitivamente me ayudó a encontrar una solución .. –

1

Esto no es exactamente un error; solo se basa en el hecho de que (para mantenerse al día en las comparaciones de rendimiento) IE se creó a partir de la versión 5.5 con un preajuste minimizado de definiciones estáticas;

Eso significa: en lugar de gastar cualquier Elemento la definición completa y correcta (dependiendo de qué dios de las especificaciones saludas para ...) para el tipo que es, IE está utilizando menos.


TODO: devolver lo que debe ser acreditado por actuar como un párrafo top-model en posición relativa; PANTALLA según sus talentos; cualquier superpárrculo debe hacer la pasarela en línea, incluso si es un bloque -cabeza, puede intentar usar azúcar y latigazos para recordar su desagradable P de su origen como en línea-bloque. Es un frenesí P, darle un poco de respeto a sus talentos ...


DOJO: De hecho, como un script-javalchemist runa-lectura ser el que tiene que tiene que tomar el control de la cerveza del navegador sirve. O que hace que la pluma, en silencio ...


GODO: cosas necesarias para ello, si desea utilizar negativas-márgenes en los navegadores que no juegan legalmente:

  • recordar los elementos que desea usar del origen de su pantalla; no creen en navegador-vendedores que habrían hecho ya para usted

    • Si se acaba de salir para IE 7+ utilizar display: inline-block;
    • SI desea obtener negativos-márgenes para efectuar notables en todos los navegadores, pero pueden olvidarse de NS4, a continuación, utilizar display: inline; o pantalla: bloque;
  • No se olvide de construir la base para sus negativas-márgenes: set position: relative;


MOJO: Si IE-betas y los más antiguos, como 5,5 o 6 están en su punto de interés, usted tiene que asegurarse de que su párrafo de márgenes negativos, correspondientes ubicados en tiene valores para ancho y altura; Dependiendo de lo que intente lograr, a veces una altura de : auto; ayuda.

Cuestiones relacionadas