Проблема с диалоговым окном пользовательского интерфейса jQuery В IE

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

Вопрос

Я использую новые библиотеки jQuery 1.3.2 и jQuery-ui-1.7 вместе с диалогом пользовательского интерфейса.У меня есть тег div с несколькими элементами формы (текстовое поле, флажок и т.д.) В нем.При загрузке страницы jQuery отображает div в виде диалогового окна.Это абсолютно нормально работает в FF, но в IE высота div неверна.Это просто отображение в строке заголовка части содержимого.Я явно задал высоту при создании div.Если я установлю параметр height после открытия диалогового окна, высота будет исправлена, но содержимое останется пустым (отображается верхняя треть текстового поля).Если я разрешу изменять размер диалогового окна, если вы измените его размер в IE, он будет работать нормально, но я не хочу заставлять пользователей 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';
    }
});
Это было полезно?

Решение 6

Я ответил на свой вопрос. Мне просто нужно было поиграть со свойствами высоты диалога и некоторыми элементами внутри диалога. Хорошо, позвони мне!

Другие советы

После некоторых поисков в Google я нашел верный ответ на вопрос. Это вызвано несовместимым Doctype. Перейдите на страницу http://osdir.com/ml/jquery-ui. /2009-08/msg00388.html для получения дополнительной информации.

Я пробовал это на своих кодах, и решение в этом URL-адресе решает проблему.

Я столкнулся с такой же проблемой в IE7 и более подробно изучил симптомы и решение.Я заметил, что когда я создал фиктивное диалоговое окно без содержимого, то высота отображалась правильно.Таким образом, я начал играть с различными типами контента, чтобы посмотреть, смогу ли я написать контент по-другому, чтобы преодолеть эту проблему.Не повезло.Однако я обнаружил, что чем больше контента я добавлял, тем короче становился диалог только в IE7 (даже скрытые элементы немного укорачивают его).Таким образом, простой контент, скорее всего, не окажет особого заметного эффекта (и, следовательно, отсутствие новых жалоб по этому вопросу).Таблица и многие элементы формы, которые я добавлял, создают очень заметный эффект.

Установка высоты в значение auto работает несколько хорошо, но IE7 по-прежнему неправильно вычисляет высоту моего контента примерно на 10 пикселей меньше, чем нужно (возможно, высота заполнения объекта), и, таким образом, jQuery добавляет полосу прокрутки.Не идеально, но приемлемо, учитывая то, что последует дальше.

Не сумев найти другого обходного пути, я начал изучать решение DOCTYPE.Я обнаружил, что DOCTYPE нашего сайта - хотя он и выглядит правильным - на самом деле переводит все браузеры в "Режим причуд" и что это истинный источник проблемы.Я сомневаюсь, что jQuery поддерживает проблемы с режимом quirks, поэтому я сомневаюсь, что это когда-нибудь будет исправлено.

Мой текущий ТИП ДОКУМЕНТА:

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

Каким он должен быть:

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

Даже этот старый документ работал:

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

Таким образом, это не значит, что DOCTYPE должен быть значением HTML 5 для <!DOCTYPE html>, это должен быть допустимый DOCTYPE (HTML 4 или 5 - не уверен насчет XHTML), который установит IE7 на что-то другое, кроме режима quirks (Firefox работает нормально в любом случае).Видишь:

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

У меня нет возможности изменить ТИП документа нашего сайта, поэтому мне приходится использовать другое решение, такое как автоматическая высота.Я заметил, что есть другие различия между режимами quirks и standards при использовании диалогового окна jQuery, поэтому мне также приходится иметь дело с ними (а именно, процентное соотношение размера шрифта накапливается по-разному как в IE7, так и в Firefox).

Я тоже столкнулся с той же проблемой. Да, не указывая высоту, IE изменяет размер диалогового окна и показывает его содержимое. Однако я не хочу, чтобы модальное диалоговое окно продолжало расти по мере того, как содержимое становилось длиннее. В идеале было бы отображать диалоговое окно с заданной высотой, и пользователи могли просматривать содержимое с помощью полосы прокрутки. Это прекрасно работает в FireFox. У кого-нибудь есть решение для IE?

Мне удалось это исправить, указав единицу измерения по высоте следующим образом: 

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

Мне не нужно было связываться с doctype. Это было в IE8, jQuery 1.4.4 и jQuery UI 1.8.9.

- Быстро, чтобы опубликовать этот. Это ломает это в Firefox. Не обращай на меня внимания!

У меня похожие проблемы при использовании размеров шрифта в пикселях. размер шрифта: 11 пикселей - размер шрифта: 15 пикселей; в css вызвала проблемы с высотой в ie9. Размер шрифта: 16px; и выше отлично работает в ie9

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top