web-dev-qa-db-fra.com

problème de dialogue avec l'interface utilisateur jQuery avec IE

J'utilise les nouvelles bibliothèques jQuery 1.3.2 et jQuery-ui-1.7 avec le dialogue d'interface utilisateur. J'ai une balise div avec plusieurs éléments de formulaire (zone de texte, case à cocher, etc.). Au chargement de la page, jQuery affiche la div en tant que dialogue. Cela fonctionne parfaitement dans FF, mais dans IE, la hauteur de la div est fausse. Il montre juste un peu du contenu à la barre de titre. Je règle explicitement la hauteur lors de la création de la div. Si je définis l'option de hauteur après avoir ouvert la boîte de dialogue, la hauteur est corrigée, mais le contenu est vide (affiche le tiers supérieur d'une zone de texte). Si je permets au dialogue d'être redimensionnable, si vous le redimensionnez dans IE, cela fonctionne correctement, mais je ne veux pas forcer les utilisateurs de IE à redimensionner uniquement pour afficher le contenu. Des idées? Voici le code que j'utilise pour créer le dialogue:

$('#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';
    }
});
internet-explorerjquery-uimodal-dialog
26
Dan Appleyard

J'ai répondu à ma propre question. Il me suffisait de jouer avec les propriétés de hauteur du dialogue et certains des éléments qu'il contient. Bon appelez moi!

0
Dan Appleyard

Après quelques recherches sur Google, j'ai trouvé la vraie réponse à la question. Il est causé par un Doctype incompatible. Veuillez consulter http://osdir.com/ml/jquery-ui/2009-08/msg00388.html pour plus d'informations.

Je l'ai essayé sur mes codes et la solution de cette URL résout le problème.

30
Monte Chan

Je connaissais le même problème dans IE7 et j’ai examiné de plus près les symptômes et la solution. J'ai remarqué que lorsque j'ai créé un dialogue factice sans contenu, la hauteur est correctement rendue. Ainsi, j'ai commencé à jouer avec différents types de contenu pour voir si je pouvais écrire le contenu différemment pour surmonter le problème. Pas de chance. Ce que j’ai découvert, c’est que plus le contenu ajouté était important, plus la boîte de dialogue était courte dans IE7 uniquement (même les éléments cachés le raccourcissaient un peu). Ainsi, un contenu simple n'aura probablement pas beaucoup d'effet notable (et donc l'absence de plus de plaintes sur cette question). La table et les nombreux éléments de formulaire que j'ai ajoutés créent un effet très visible.

Définir la hauteur sur auto fonctionne plutôt bien, mais IE7 calcule toujours la hauteur de mon contenu d’environ 10 pixels de trop (probablement la hauteur de remplissage d’un objet) et jQuery ajoute donc la barre de défilement. Pas parfait, mais acceptable compte tenu de ce qui suit.

N'ayant pas réussi à trouver une autre solution de contournement, j'ai commencé à rechercher la solution DOCTYPE. J'ai découvert que le DOCTYPE de notre site, même s'il semble correct, place tous les navigateurs en mode "Quirks" et qu'il s'agit de la véritable source du problème. Je doute que jQuery prenne en charge les problèmes de mode quirks, je doute donc que cela soit corrigé.

Mon DOCTYPE actuel:

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

Ce que ça devrait être:

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

Même cet ancien DOCTYPE a fonctionné:

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

Ainsi, ce n'est pas que DOCTYPE doit être la valeur HTML 5 de <!DOCTYPE html>, mais bien que ce soit un DOCTYPE valide (HTML 4 ou 5 - pas sûr du XHTML) qui définira IE7 autrement qu'en mode quirks (Firefox fonctionne bien de toute façon). Voir:

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

Je n'ai pas la possibilité de changer le DOCTYPE de notre site, donc je dois utiliser une autre solution telle que l'auto-hauteur. J'ai remarqué qu'il y avait d'autres différences entre les modes standard et bizarreries lors de l'utilisation de la boîte de dialogue jQuery, je dois donc également en tenir compte (en d'autres termes, les pourcentages de taille de police sont cumulés différemment dans IE7 et Firefox).

19
juanitogan

J'ai rencontré le même problème aussi. Oui, en ne spécifiant pas la hauteur, IE redimensionne la boîte de dialogue et affiche son contenu. Cependant, je ne veux pas que la boîte de dialogue modale continue à grossir à mesure que le contenu s'allonge. L'idéal serait d'afficher la boîte de dialogue avec la hauteur spécifiée et les utilisateurs peuvent afficher le contenu à l'aide de la barre de défilement. Cela fonctionne parfaitement dans FireFox. Quelqu'un at-il une solution pour IE?

4
Monte Chan

J'ai pu résoudre ce problème en donnant une unité à la hauteur comme ceci:

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

Je n'ai pas eu à jouer avec le doctype. C'était sur IE8, jQuery 1.4.4 et jQuery UI 1.8.9.

--Est rapide de poster celui-ci. Cela casse dans Firefox. Ignore moi!

0
Dude

Je rencontre des problèmes similaires lors de l’utilisation de polices de caractères en pixels . Taille de police: 11px - taille de police: 15px; en css a causé les problèmes de hauteur dans ie9 . font-size: 16px; et fonctionne très bien dans ie9

0
Mössler