Problema della finestra di dialogo dell'interfaccia utente jQuery con IE

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

Domanda

Sto usando le nuove librerie jQuery 1.3.2 e jQuery-ui-1.7 insieme alla finestra di dialogo dell'interfaccia utente. Ho un tag div con diversi elementi del modulo (casella di testo, casella di controllo, ecc.). Al caricamento della pagina, jQuery mostra il div come una finestra di dialogo. Questo funziona assolutamente bene in FF, ma in IE, l'altezza del div è sbagliata. Sta solo mostrando un po 'di contenuto alla barra del titolo. Ho impostato esplicitamente l'altezza durante la creazione del div. Se imposto l'opzione di altezza dopo aver aperto la finestra di dialogo, l'altezza viene corretta, ma il contenuto è vuoto (mostra il terzo superiore di una casella di testo). Se consento che la finestra di dialogo sia ridimensionabile, se la ridimensioni in IE funziona benissimo, ma non voglio forzare gli utenti di IE a ridimensionare solo per vedere i contenuti. Qualche idea? Ecco il codice che uso per creare la finestra di dialogo: 

$('#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';
    }
});
È stato utile?

Soluzione 6

Ho risposto alla mia domanda. Ho dovuto solo giocare con le proprietà di altezza della finestra di dialogo e alcuni degli elementi all'interno della finestra di dialogo. Bene, chiamami!

Altri suggerimenti

Dopo aver fatto alcune ricerche su Google, ho trovato la vera risposta alla domanda. È causato da un Doctype incompatibile. Vai a http://osdir.com/ml/jquery-ui /2009-08/msg00388.html per ulteriori informazioni.

L'ho provato sui miei codici e la soluzione in questo URL risolve il problema.

Stavo riscontrando lo stesso problema in IE7 e ho esaminato più a fondo i sintomi e la soluzione. Ho notato che quando ho creato una finestra di dialogo fittizia senza contenuto, l'altezza è stata resa correttamente. Così, ho iniziato a giocare con vari tipi di contenuti per vedere se potevo scrivere il contenuto in modo diverso per superare il problema. Senza fortuna. Quello che ho scoperto, tuttavia, è che più contenuto ho aggiunto, più breve è il dialogo ottenuto solo in IE7 (anche gli elementi nascosti lo accorciano un po '). Pertanto, i contenuti semplici non avranno probabilmente effetti molto evidenti (e, quindi, la mancanza di ulteriori lamentele su questo tema). La tabella e molti elementi del modulo che stavo aggiungendo creano un effetto molto evidente.

L'impostazione dell'altezza su automatica funziona piuttosto bene, ma IE7 calcola ancora in modo errato l'altezza sul mio contenuto di circa 10 pixel troppo corta (probabilmente l'altezza di riempimento su un oggetto) e quindi jQuery aggiunge la barra di scorrimento. Non perfetto, ma accettabile dato quanto segue.

Non trovando un'altra soluzione alternativa, ho iniziato a cercare la soluzione DOCTYPE. Ho scoperto che il DOCTYPE del nostro sito - sebbene sembri corretto - in realtà mette tutti i browser in & Quot; Quirks Mode & Quot; e che questa è la vera fonte del problema. Dubito che jQuery supporti i problemi della modalità strane, quindi dubito che questo verrà mai risolto.

Il mio DOCTYPE attuale:

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

Cosa dovrebbe essere:

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

Anche questo DOCTYPE più vecchio ha funzionato:

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

Quindi, non è che DOCTYPE deve essere il valore HTML 5 di <!DOCTYPE html>, è che deve essere un DOCTYPE valido (HTML 4 o 5 - non sono sicuro su XHTML) che imposterà IE7 su qualcosa di diverso della modalità Quirks (Firefox funziona bene in entrambi i modi). Vedi:

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

Non ho la possibilità di modificare il DOCTYPE del nostro sito, quindi devo usare un'altra soluzione come l'altezza automatica. Ho notato che ci sono altre differenze tra le stranezze e le modalità standard quando uso la finestra di dialogo jQuery, quindi devo occuparmene anche io (vale a dire, le percentuali delle dimensioni dei caratteri si accumulano in modo diverso in IE7 e Firefox).

Ho riscontrato anche lo stesso problema. Sì, non specificando l'altezza, IE ridimensiona la finestra di dialogo e ne mostra il contenuto. Tuttavia, non voglio che la finestra di dialogo modale continui a crescere man mano che il contenuto aumenta. L'ideale sarebbe visualizzare la finestra di dialogo con l'altezza specificata e gli utenti possono visualizzare i contenuti utilizzando la barra di scorrimento. Funziona perfettamente con FireFox. Qualcuno ha una soluzione per IE?

Sono stato in grado di risolvere questo problema dando un'unità all'altezza in questo modo: 

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

Non ho dovuto fare confusione con il doctype. Questo era su IE8, jQuery 1.4.4 e jQuery UI 1.8.9.

: dovevamo postare velocemente questo. Questo lo rompe in Firefox. Ignorami!

Ho riscontrato problemi simili usando pixel di dimensioni caratteri. dimensione carattere: 11px - dimensione carattere: 15px; in css ha causato i problemi di altezza in ie9. font-size: 16px; e up funziona bene in ie9

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top