Problema de diálogo de IU de jQuery con IE

Estoy utilizando las nuevas bibliotecas jQuery 1.3.2 y jQuery-ui-1.7 junto con el cuadro de diálogo UI. Tengo una etiqueta div con varios elementos de formulario (cuadro de texto, casilla de verificación, etc.) en ella. Tras la carga de la página, jQuery muestra el div como un diálogo. Esto funciona absolutamente bien en FF, pero en IE, la altura del div es incorrecta. Simplemente muestra la barra de título un poco del contenido. Establecí explícitamente la altura al crear el div. Si configuro la opción de altura después de abrir el diálogo, se corrige el alto, pero el contenido está en blanco (muestra el tercio superior de un cuadro de texto). Si permito que se pueda redimensionar el diálogo, si lo cambia de tamaño en IE funciona bien, pero no quiero obligar a los usuarios de IE a cambiar el tamaño solo para ver los contenidos. ¿Algunas ideas? Aquí está el código que uso para crear el diálogo:Problema de diálogo de IU de jQuery con IE

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) { 
     if($('#agree').val() != '1') 
      location.href = 'somepage.html'; 
    } 
});

Fuente

2009-03-10 Dan Appleyard

He respondido mi propia pregunta. Solo tuve que jugar con las propiedades de altura del diálogo y algunos de los elementos dentro del diálogo. Bueno llámame!

Fuente

2009-03-11 17:58:17

esto no responde la pregunta. – CodingWithoutComments

Tuve que cambiar el tamaño de algunos cuadros de texto en la etiqueta div que actuaba como mi cuadro de diálogo y eliminé el atributo de altura en mi código jquery. Si otras personas pudieron resolver sus problemas basándose en mi propia respuesta, creo que SÍ responde a la pregunta. –

Puedo confirmar que no especificar la propiedad de altura en el objeto pasado al diálogo ({...}) lo hace funcionar en IE. No tengo ni idea de por qué. –

Me encontré con el mismo problema también. Sí, al no especificar la altura, IE cambia el tamaño del cuadro de diálogo y muestra su contenido. Sin embargo, no quiero que el cuadro de diálogo modal siga creciendo a medida que los contenidos se hacen más largos. Lo ideal sería mostrar el cuadro de diálogo con la altura especificada y los usuarios pueden ver los contenidos utilizando la barra de desplazamiento. Esto funciona perfectamente en Firefox. ¿Alguien tiene una solución para IE?

Fuente

2010-09-17 17:47:59

Después de hacer algunas búsquedas en Google, encontré la verdadera respuesta a la pregunta. Es causado por un Doctype incompatible. Vaya a http://osdir.com/ml/jquery-ui/2009-08/msg00388.html para obtener más información.

Lo probé con mis códigos y la solución en esta dirección URL SOLUCIONA el problema.

Fuente

2010-09-17 20:10:13

Esta es la verdadera respuesta al problema. He tenido el mismo problema e incluir DOCTYPE soluciona algunos problemas de estilo con jQuery. –

Gracias por compartir la solución, también funcionó con IE9. – will824

Muchas gracias. Esto realmente resuelve el problema. IE apesta –

que fue capaz de solucionar este problema, dando una unidad de la altura de esta manera:

$(id).dialog({ modal: true, height: h + "px", width: w });

no tenía que meterse con el tipo de documento. Esto fue en IE8, jQuery 1.4.4 y jQuery UI 1.8.9.

--Volvió a publicar este. Eso lo rompe en Firefox. ¡Ignorame!

Fuente

2011-03-04 17:27:33 Dude

Estaba experimentando el mismo problema en IE7 y analicé más detenidamente los síntomas y la solución. Noté que cuando creé un diálogo ficticio sin contenido, la altura se procesaba correctamente. Por lo tanto, comencé a jugar con varios tipos de contenido para ver si podía escribir el contenido de manera diferente para superar el problema. Sin suerte. Lo que descubrí, sin embargo, fue que cuanto más contenido añadía, más corto era el diálogo en IE7 solamente (incluso los elementos ocultos lo acortaban un poco). Por lo tanto, es probable que el contenido simple no tenga mucho efecto notable (y, por lo tanto, la falta de más quejas sobre este tema). La tabla y muchos elementos de formulario que estaba agregando crean un efecto muy notable.

Establecer la altura en auto funciona bastante bien pero IE7 aún calcula mal la altura de mi contenido en unos 10 píxeles demasiado cortos (posiblemente la altura de relleno en un objeto) y así jQuery agrega la barra de desplazamiento. No es perfecto, pero aceptable dado lo que sigue.

Al no haber encontrado otra solución, comencé a buscar en la solución DOCTYPE. Descubrí que el DOCTYPE de nuestro sitio, aunque parece correcto, pone a todos los navegadores en el "Modo Quirks" y que esta es la verdadera fuente del problema. Dudo que jQuery soporte los problemas del modo peculiar, así que dudo que esto se solucione.

Mi DOCTYPE actual:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

lo que debería ser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Incluso este DOCTYPE mayor trabajaba:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

Por lo tanto, no es que el DOCTYPE debe ser el valor HTML 5 de <!DOCTYPE html>, es que debe ser un DOCTYPE válido (HTML 4 o 5 - no estoy seguro acerca de XHTML) que establecerá IE7 en algo distinto al modo peculiar (Firefox funciona bien de cualquier manera). Ver:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

no tengo la opción de cambiar DOCTYPE de nuestro sitio así que tengo que utilizar otra solución como la altura de automóviles. Observé que existen otras diferencias entre las peculiaridades y los modos estándar cuando utilizo el cuadro de diálogo jQuery, así que también tengo que ocuparme de ellos (es decir, los porcentajes del tamaño de fuente se acumulan de manera diferente tanto en IE7 como en Firefox).

Fuente

2011-03-28 16:28:36 juanitogan

Tengo problemas similares cuando uso los tamaños de letra en píxeles. tamaño de letra: 11px - tamaño de letra: 15px; en css causó los problemas de altura en ie9. font-size: 16px; y hasta funciona bien en ie9

Fuente

2011-11-24 17:14:19

Problema de diálogo de IU de jQuery con IE

Respuesta

Cuestiones relacionadas