Problema de diálogo de jQuery UI con IE

StackOverflow https://stackoverflow.com/questions/630984

Pregunta

Estoy usando 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.). Al cargar 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. Solo muestra la barra de título un poco del contenido. Establezco explícitamente la altura al crear el div. Si configuro la opción de altura después de abrir el cuadro de diálogo, la altura se corrige, pero el contenido está en blanco (muestra el tercio superior de un cuadro de texto). Si permito que el cuadro de diálogo sea redimensionable, si cambia el tamaño en IE, funciona bien, pero no quiero obligar a los usuarios de IE a cambiar el tamaño solo para ver el contenido. ¿Algunas ideas? Aquí está el código que uso para crear el diálogo: 

$('#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';
    }
});
¿Fue útil?

Solución 6

He respondido mi propia pregunta. Solo tenía que jugar con las propiedades de altura del diálogo y algunos de los elementos dentro del diálogo. ¡Bien, llámame!

Otros consejos

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é en mis códigos y la solución en esta URL RESUELVE el problema.

Estaba experimentando este mismo problema en IE7 y analicé más profundamente los síntomas y la solución. Noté que cuando creé un cuadro de diálogo ficticio sin contenido, la altura se representaba 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. Sin embargo, lo que descubrí fue que cuanto más contenido agregué, más corto fue el cuadro de diálogo solo en IE7 (incluso los elementos ocultos lo acortan un poco). Por lo tanto, el contenido simple probablemente no tendrá un 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 automático funciona un poco bien, pero IE7 todavía calcula mal la altura de mi contenido en unos 10 píxeles demasiado cortos (posiblemente la altura del relleno en un objeto) y, por lo tanto, jQuery agrega la barra de desplazamiento. No es perfecto, pero aceptable dado lo que sigue.

Después de no encontrar otra solución, comencé a buscar la solución DOCTYPE. Descubrí que el DOCTYPE de nuestro sitio, aunque parece correcto, en realidad pone todos los navegadores en & Quot; Modo Quirks & Quot; y que esta es la verdadera fuente del problema. Dudo que jQuery admita problemas de modo peculiaridades, así que dudo que esto se solucione alguna vez.

Mi DOCTYPE actual:

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

Qué debería ser:

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

Incluso este DOCTYPE anterior funcionó:

<!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 deba ser el valor HTML 5 de <!DOCTYPE html>, es que debe ser un DOCTYPE válido (HTML 4 o 5 - no estoy seguro sobre XHTML) que establecerá IE7 en algo diferente que el 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 el DOCTYPE de nuestro sitio, así que tengo que usar otra solución, como la altura automática. Noté que existen otras diferencias entre las peculiaridades y los modos estándar cuando uso el jQuery Dialog, así que también tengo que lidiar con ellos (a saber, los porcentajes de tamaño de fuente se acumulan de manera diferente en IE7 y Firefox).

También me encontré con el mismo problema. 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 el contenido se alargue. Lo ideal sería mostrar el cuadro de diálogo con la altura especificada y los usuarios pueden ver el contenido mediante la barra de desplazamiento. Esto funciona perfectamente en Firefox. ¿Alguien tiene una solución para IE?

Pude arreglar esto dando una unidad en la altura como esta: 

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

No tuve que meterme con el doctype. Esto estaba en IE8, jQuery 1.4.4 y jQuery UI 1.8.9.

: fue rápido publicar este. Eso lo rompe en Firefox. ¡Ignórame!

Tengo problemas similares al usar tamaños de fuente en píxeles. tamaño de fuente: 11px - tamaño de fuente: 15px; en css causó los problemas de altura en ie9. tamaño de fuente: 16px; y funciona bien en ie9

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top