jQuery UI-Dialog Ausgabe mit IE

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

Frage

Ich bin mit den neuen jQuery 1.3.2 und jQuery-ui-1.7-Bibliotheken zusammen mit dem UI-Dialog. Ich habe einen div-Tag mit mehreren Formelementen (Textbox, Checkbox, etc.) darin. Auf Seite zu laden, zeigt jQuery die div als Dialog. Dies funktioniert absolut in FF in Ordnung, aber in IE, die Höhe des div ist falsch. Es zeigt nur der Titel ein wenig den Inhalt sperren. Ich habe ausdrücklich die Höhe, wenn das div zu schaffen. Wenn ich die Höhe Option nach Öffnen des Dialogs wird die Höhe korrigiert, aber der Inhalt leer ist (zeigt das obere Drittel einer Textbox). Wenn ich den Dialog zu sein resizable erlauben, wenn Sie es in IE die Größe es funktioniert gut, aber ich möchte nicht, IE-Benutzer zwingen, nur um die Größe, den Inhalt zu sehen. Irgendwelche Ideen? Hier ist der Code verwende ich den Dialog zu erstellen: 

$('#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';
    }
});
War es hilfreich?

Lösung 6

Ich habe meine eigene Frage beantwortet. Ich hatte gerade mit den Höheneigenschaften von Dialog und einige der Elemente innerhalb des Dialogs zu spielen. Gut rufen Sie mich an!

Andere Tipps

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

Ich habe versucht, es auf meine Codes und die Lösung in diesem URL tritt das Problem lösen.

ich erleben das gleiche Problem in IE7 und nahm einen tieferen Einblick in die Symptome und Lösung. Ich bemerkte, dass, wenn ich einen Dummy-Dialog ohne Inhalt erstellt dann die Höhe korrekt wiedergegeben. So begann ich um mit verschiedenen Arten von Inhalten zu spielen, um zu sehen, ob ich den Inhalt schreiben könnte anders das Problem zu überwinden. Kein Glück. Was ich entdecken hat, war jedoch, dass die mehr Inhalte, die ich hinzugefügt, desto kürzer ist nur in IE7 das Dialog bekam (auch versteckte Gegenstände es ein bisschen zu verkürzen). Somit wird einfacher Inhalt wahrscheinlich nicht viel spürbare Wirkung (und damit das Fehlen von mehr Beschwerden zu diesem Thema). Die Tabelle und viele Formularelemente I Zugabe wurde eine sehr deutliche Wirkung.

die Höhe etwas gut zu Auto-Einstellung funktioniert, aber IE7 verkalkuliert noch die Höhe auf meinem Gehalt von etwa 10 Pixeln zu kurz (möglicherweise die Polsterung Höhe auf einem Objekt) und somit fügt jQuery die Bildlaufleiste. Nicht perfekt, aber akzeptabel gegeben, was folgt.

ist fehlgeschlagen Nachdem eine andere Abhilfe zu finden, begann ich in die DOCTYPE Lösung suchen. Ich entdeckte, dass unsere Website DOCTYPE - obwohl es korrekt aussieht - es bringt eigentlich alle Browser in „Quirks-Modus“ und dass dies die wahre Ursache des Problems. Ich bezweifle, dass jQuery Quirksmodus Fragen unterstützt, damit ich das bezweifeln jemals festgelegt werden.

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">

So ist es nicht, dass die DOCTYPE der HTML-5-Wert von <!DOCTYPE html> sein muss, ist es, dass es eine gültige DOCTYPE sein muss (HTML 4 oder 5 - nicht sicher über XHTML), die IE7 auf etwas anderes als Macken gesetzt wird Modus (Firefox funktioniert in Ordnung oder so). Siehe auch:

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

Ich habe nicht die Möglichkeit, unsere Website DOCTYPE zu ändern, damit ich eine andere Lösung wie Auto-Höhe verwenden. Ich habe bemerkt, es gibt noch andere Unterschiede zwischen Macken und Standards Modi, wenn der jQuery-Dialog mit so muß ich auch mit denen beschäftigen (nämlich sind font-size Prozent akkumulieren unterschiedlich sowohl in IE7 und Firefox).

Ich kam in das gleiche Problem auch. Ja, durch die Höhe nicht spezifizieren, tut IE das Dialogfeld die Größe und zeigt seinen Inhalt. Aber ich will nicht das modale Dialogfeld weiter wachsen als der Inhalt länger. Das Ideal wäre, um das Dialogfeld mit der angegebenen Höhe angezeigt und die Benutzer den Inhalt mithilfe der Bildlaufleiste anzeigen können. Das funktioniert perfekt in FireFox. Hat jemand eine Lösung für IE?

Ich war in der Lage, dies zu beheben, indem Sie eine Einheit auf der Höhe wie folgt geben: 

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

Ich habe nicht mit dem Doctype Chaos haben. Dies war auf IE8, jQuery 1.4.4 und jQuery UI 1.8.9.

- War zu schnell, diese zu veröffentlichen. Das bricht es in Firefox. Ignorieren Sie mich!

Ich habe ähnliche Probleme bei Schriftgrößen in Pixeln. font-size: 11px - font-size: 15px; in CSS verursacht die Höhenprobleme in ie9. font-size: 16px; und bis funktioniert gut in ie9

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top