jQuery UI Dialog Problem mit IE

Ich benutze die neue jQuery 1.3.2 und jQuery-ui-1.7-Bibliotheken zusammen mit dem UI-Dialog. Ich habe ein Div-Tag mit mehreren Formularelementen (Textfeld, Kontrollkästchen, etc.) darin. Beim Laden der Seite zeigt jQuery das div als Dialog an. Das funktioniert in FF einwandfrei, aber im IE ist die Höhe des Div falsch. Es zeigt nur die Titelleiste ein wenig vom Inhalt. Ich setze explizit die Höhe beim Erstellen des Div. Wenn ich die Höhe Option nach dem Öffnen des Dialogfelds festlegen, wird die Höhe korrigiert, aber der Inhalt ist leer (zeigt das obere Drittel eines Textfelds). Wenn ich erlaube, dass der Dialog in der Größe veränderbar ist, funktioniert es gut, wenn Sie die Größe im IE ändern, aber ich möchte IE-Benutzer nicht zwingen, die Größe zu ändern, nur um den Inhalt zu sehen. Irgendwelche Ideen? Hier ist der Code, den ich verwende, um den Dialog zu erstellen:jQuery UI Dialog Problem mit 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'; 
    } 
});

Quelle

2009-03-10 Dan Appleyard

Ich habe meine eigene Frage beantwortet. Ich musste nur mit den Höheneigenschaften des Dialogs und einiger Elemente innerhalb des Dialogs spielen. Gut, ruf mich an!

Quelle

2009-03-11 17:58:17

dies beantwortet die Frage nicht. – CodingWithoutComments

Ich musste einige Textfelder in dem div-Tag, das als mein Dialog fungierte, ändern und das Höhenattribut in meinem jquery-Code entfernen. Wenn andere Personen in der Lage waren, ihre Probleme basierend auf meiner eigenen Antwort zu lösen, denke ich, dass sie die Frage beantwortet. –

Ich kann bestätigen, dass die Angabe der Eigenschaft height in dem Objekt, das an das Dialogfeld übergeben wird ({...}), es im IE funktioniert. Ich habe keine Ahnung warum. –

Ich stieß auf das gleiche Problem auch. Ja, indem IE die Höhe nicht angibt, ändert IE die Größe des Dialogfelds und zeigt seinen Inhalt an. Das modale Dialogfeld soll jedoch nicht länger wachsen, da der Inhalt länger wird. Das Ideal wäre, das Dialogfeld mit der angegebenen Höhe anzuzeigen, und die Benutzer können den Inhalt mithilfe der Bildlaufleiste anzeigen. Dies funktioniert perfekt in FireFox. Hat jemand eine Lösung für IE?

Quelle

2010-09-17 17:47:59

Nach einigen Google-Suchen fand ich die wahre Antwort auf die Frage. Es wird von einem inkompatiblen Doctype verursacht. Bitte gehen Sie zu http://osdir.com/ml/jquery-ui/2009-08/msg00388.html für weitere Informationen.

Ich habe es auf meine Codes versucht und die Lösung in dieser URL löst das Problem.

Quelle

2010-09-17 20:10:13

Dies ist die wahre Antwort auf das Problem. Ich hatte das gleiche Problem und einschließlich der DOCTYPE tatsächlich löst ein paar Styling-Probleme mit jQuery. –

Danke, dass Sie die Lösung geteilt haben, es hat auch mit IE9 funktioniert. – will824

Vielen Dank. Das löst das Problem wirklich. IE saugt –

konnte ich dieses Problem beheben, indem Sie eine Einheit auf der Höhe wie folgt geben:

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

ich nicht mit dem Doctype Chaos hatte. Dies war auf IE8, jQuery 1.4.4 und jQuery UI 1.8.9.

--Was zu schnell zu diesem Post. Das bricht es in Firefox. Ignorier mich!

Quelle

2011-03-04 17:27:33 Dude

Ich hatte das gleiche Problem in IE7 und nahm einen tieferen Einblick in die Symptome und die Lösung. Ich habe festgestellt, dass bei der Erstellung eines Dummy-Dialogs ohne Inhalt die Höhe korrekt gerendert wurde. Daher begann ich mit verschiedenen Arten von Inhalten herumzuspielen, um zu sehen, ob ich den Inhalt anders schreiben könnte, um das Problem zu lösen. Kein Glück. Was ich jedoch entdeckte war, dass je mehr Inhalt ich hinzufügte, desto kürzer wurde der Dialog nur in IE7 (sogar versteckte Elemente verkürzen es ein wenig). Daher werden einfache Inhalte wahrscheinlich keine merklichen Auswirkungen haben (und somit das Fehlen weiterer Beschwerden zu diesem Thema). Die Tabelle und viele Formularelemente, die ich hinzugefügt habe, erzeugen einen sehr auffälligen Effekt.

Einstellung der Höhe auf Auto funktioniert etwas gut, aber IE7 berechnet immer noch die Höhe auf meinem Inhalt um etwa 10 Pixel zu kurz (möglicherweise die Füllhöhe auf ein Objekt) und damit fügt jQuery die Bildlaufleiste hinzu. Nicht perfekt, aber annehmbar angesichts dessen, was folgt.

Nachdem keine andere Problemumgehung gefunden wurde, habe ich mich mit der DOCTYPE-Lösung befasst. Ich entdeckte, dass der DOCTYPE unserer Website - obwohl er korrekt aussieht - alle Browser in den "Quirks-Modus" versetzt und dass dies die wahre Ursache des Problems ist. Ich bezweifle, dass jQuery Quirks-Modus-Probleme unterstützt, so dass ich bezweifle, dass dies jemals behoben wird.

Mein aktueller DOCTYPE:

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

Was es sein sollte:

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

Auch diese ältere DOCTYPE gearbeitet:

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

Es ist also nicht so, dass der DOCTYPE der HTML 5-Wert von <!DOCTYPE html> sein muss, es muss ein gültiger DOCTYPE (HTML 4 oder 5 - nicht sicher über XHTML) sein, der IE7 auf etwas anderes als den quirks mode setzt (Firefox funktioniert in jeder Hinsicht gut). Siehe:

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

Ich habe nicht die Möglichkeit haben, unsere Website DOCTYPE zu ändern, so muss ich eine andere Lösung verwenden, wie Auto-Höhe. Mir ist aufgefallen, dass es bei der Verwendung des jQuery-Dialogs noch andere Unterschiede zwischen den Mappenzuständen und den Standardmodi gibt, so dass ich mich auch mit diesen befassen muss (die Prozentsätze für die Schriftgröße werden sowohl in IE7 als auch in Firefox unterschiedlich angesammelt).

Quelle

2011-03-28 16:28:36 juanitogan

Ich habe ähnliche Probleme bei der Verwendung von Schriftgrößen in Pixel. Schriftgröße: 11px - Schriftgröße: 15px; in css verursachte die Höhenprobleme in ie9. Schriftgröße: 16px; und funktioniert gut in ie9

Quelle

2011-11-24 17:14:19

jQuery UI Dialog Problem mit IE

Antwort

Verwandte Themen