JQuery UI Диалог Проблема с IE - PullRequest
Новая
       35

JQuery UI Диалог Проблема с IE

26 голосов
/ 10 марта 2009

Я использую новые библиотеки 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';
    }
});

Ответы [ 6 ]

30 голосов
/ 18 сентября 2010

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

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

19 голосов
/ 28 марта 2011

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

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

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

Мой текущий 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 в другое значение чем режим причуд (Firefox работает нормально в любом случае). Смотрите:

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

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

4 голосов
/ 17 сентября 2010

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

0 голосов
/ 24 ноября 2011

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

0 голосов
/ 04 марта 2011

Я смог это исправить, задав единицу высоты: 

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

Мне не пришлось связываться с доктипом. Это было в IE8, jQuery 1.4.4 и jQuery UI 1.8.9.

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

0 голосов
/ 11 марта 2009

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

...