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

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

Question

J'utilise les nouvelles bibliothèques jQuery 1.3.2 et jQuery-ui-1.7 avec le dialogue de l'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éfinit l'option height 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 bien, mais je ne veux pas forcer les utilisateurs d'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';
    }
});
Était-ce utile?

La solution 6

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

Autres conseils

Après quelques recherches sur Google, j'ai trouvé la vraie réponse à la question. Il est causé par un Doctype incompatible. Veuillez vous rendre sur 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.

Je rencontrais 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). Le tableau et les nombreux éléments de formulaire que j’ajoutais créent un effet très visible.

Le réglage automatique de la hauteur fonctionne assez bien, mais IE7 calcule toujours de manière incorrecte la hauteur de mon contenu d'environ 10 pixels de trop (éventuellement 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 que c'est la vraie 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 cela 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>, c'est qu'il doit s'agir d'un DOCTYPE valide (HTML 4 ou 5 - pas sûr du XHTML) qui définira IE7 sur quelque chose d'autre que le mode quirks (Firefox fonctionne bien dans les deux cas). Voir:

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

Je n'ai pas la possibilité de modifier le DOCTYPE de notre site. Je dois donc utiliser une autre solution, telle que l'altitude automatique. J’ai remarqué que jQuery Dialog présentait d’autres différences entre les modes standard et standard, c’est pourquoi je dois également en tenir compte (les pourcentages de taille de police sont cumulés différemment dans IE7 et Firefox).

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 a-t-il une solution pour IE?

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.

- Était rapide pour poster celui-ci. Cela casse dans Firefox. Ignore moi!

J'ai eu 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. taille de police: 16px; et fonctionne très bien dans ie9

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top