Проблема с диалоговым окном jQuery UI с IE

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

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

Мой текущий DOCTYPE:

<!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 работал:

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

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

Ответ 4

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

Ответ 5

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

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

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

- Чтобы быстро опубликовать этот текст. Это нарушает его в Firefox. Игнорируй меня!

Ответ 6

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