wake-up-neo.com

jQuery UI-Dialogproblem mit IE

Ich verwende die neuen jQuery 1.3.2- und jQuery-ui-1.7-Bibliotheken zusammen mit dem UI-Dialog. Ich habe ein div-Tag mit mehreren Formularelementen (Textfeld, Ankreuzfeld usw.). Beim Laden der Seite zeigt jQuery das Div als Dialog an. Das funktioniert in FF absolut einwandfrei, aber in IE ist die Höhe des Div falsch. Es zeigt nur die Titelleiste ein wenig vom Inhalt. Ich habe die Höhe beim Erstellen des div explizit festgelegt. Wenn ich die Höhenoption nach dem Öffnen des Dialogs einstelle, wird die Höhe korrigiert, der Inhalt ist jedoch leer (zeigt das obere Drittel eines Textfelds). Wenn ich die Größe des Dialogfelds zulasse, wenn Sie die Größe in IE ändern, funktioniert es gut, aber ich möchte nicht, dass IE Benutzer die Größe ändern, nur um den Inhalt anzuzeigen. Irgendwelche Ideen? Hier ist der Code, den ich zum Erstellen des Dialogs verwende:

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

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

0
Dan Appleyard

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

Ich habe es mit meinen Codes ausprobiert und die Lösung in dieser URL löst das Problem.

30
Monte Chan

Ich habe dieses Problem in IE7 erlebt und habe die Symptome und die Lösung genauer untersucht. Mir fiel auf, dass beim Erstellen eines Dummy-Dialogs ohne Inhalt die Höhe korrekt wiedergegeben wurde. So 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 hinzugefügt wurde, desto kürzer der Dialog nur im IE7 war (selbst versteckte Elemente verkürzen ihn etwas). Daher werden einfache Inhalte wahrscheinlich keine nennenswerten Auswirkungen haben (und damit das Fehlen weiterer Beschwerden zu diesem Thema). Die Tabelle und viele Formularelemente, die ich hinzugefügt habe, erzeugen einen sehr spürbaren Effekt.

Das Einstellen der Höhe auf auto funktioniert etwas gut, aber IE7 berechnet die Höhe meines Inhalts immer noch um etwa 10 Pixel zu kurz (möglicherweise die Auffüllhöhe eines Objekts) und jQuery fügt die Bildlaufleiste hinzu. Nicht perfekt, aber in Anbetracht des Folgenden akzeptabel.

Nachdem ich keine andere Problemumgehung gefunden hatte, begann ich nach der DOCTYPE-Lösung zu suchen. Ich habe festgestellt, dass DOCTYPE unserer Website - obwohl es richtig aussieht - tatsächlich alle Browser in den "Quirks-Modus" versetzt und dass dies die wahre Ursache des Problems ist. Ich bezweifle, dass jQuery Probleme im Quirks-Modus unterstützt. Ich bezweifle, dass dies jemals behoben wird.

Mein aktueller DOKTYP:

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

Was soll es sein:

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

Sogar dieser ältere DOCTYPE hat funktioniert:

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

Es ist also nicht so, dass 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 einen anderen Modus als den Quirks-Modus (Firefox) setzt funktioniert in jedem Fall in Ordnung). Sehen:

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

Ich habe nicht die Möglichkeit, den DOCTYPE unserer Website zu ändern. Daher muss ich eine andere Lösung verwenden, z. B. die automatische Höhe. Ich habe bemerkt, dass es andere Unterschiede zwischen Quirks und Standard-Modi gibt, wenn ich den jQuery-Dialog verwende. Daher muss ich mich auch mit diesen beschäftigen (nämlich, Schriftgrad-Prozentsätze werden in IE7 und Firefox unterschiedlich akkumuliert).

19
juanitogan

Ich bin auch auf das gleiche Problem gestoßen. Ja, wenn Sie die Höhe nicht angeben, ändert IE die Größe des Dialogfelds und zeigt dessen Inhalt an. Ich möchte jedoch nicht, dass das modale Dialogfeld weiter wächst, 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 den IE?

4
Monte Chan

Ich konnte das beheben, indem ich eine Einheit auf der Höhe wie folgt benannte:

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

Ich musste mich nicht mit dem Doctype herumschlagen. Dies war auf IE8, jQuery 1.4.4 und jQuery UI 1.8.9.

- War zu schnell, um dieses zu posten. Das bricht es in Firefox. Ignoriere mich!

0
Dude

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

0
Mössler