Исправление или обходной путь для диалогового окна jQuery в IE6 — основные проблемы с макетом, когда диалоговое окно содержит форму.
-
03-07-2019 - |
Вопрос
Я работаю с диалоговым окном jQuery, содержащим форму.В ie6 над формой есть пара необъяснимых дюймов отступа.Когда я удаляю форму из разметки, самые серьезные проблемы с версткой уходят.Я попробовал это без темы (по умолчанию), Flora и моей темы themeroller, и у всех них, похоже, одна и та же проблема.
Я пробовал вносить различные изменения в CSS диалогового окна, но, похоже, ничего не дает никакого эффекта, и при создании диалогового окна все равно записывается большое количество встроенного CSS, что предотвращает применение любых других стилей.
Я пробовал устанавливать свойства CSS в самой форме, такие как плавание, устранение полей и отступов, встроенное отображение и т. д., но пока форма существует, существует дополнительное пространство.Кто-нибудь смог найти обходной путь для этого?Я бы предпочел не взламывать его и иметь элементы управления формой без тега формы.
Спасибо.
Решение
Всякий раз, когда мне нужно создать тему CSS для существующего сайта, форума, виджета и т. д.Я всегда начинаю с удаления всех таблиц стилей, нормализации всех полей и заполнения до 0 для каждого основного элемента HTML DOM.Это особенно важно, когда речь идет о встроенном CSS.
Вам следует попробовать удалить любой встроенный CSS в самом элементе формы.Затем попробуйте что-то вроде:
form {
margin: 0;
padding: 0;
overflow: hidden;
}
Устранение переполнения в IE6 часто решает множество проблем с маржой.Попробуйте временно установить границы для всех элементов HTML, используя следующий стиль, чтобы увидеть, не переполняют ли какие-либо предыдущие элементы пространство формы.
* {
border: solid 1px #FF0000;
}
Если вы видите границы, наложенные на форму, вам также следует попытаться ограничить переполнение этого элемента.
Другие советы
Прежде чем менять CSS, убедитесь, что ваша страница имеет правильный тип документа.
Если у него нет типа документа, браузер будет отображать его в нем. "причуды" режиме и многие вещи будут выглядеть не совсем правильно.
Раньше у меня была аналогичная проблема с кнопками и необъяснимыми полями.В IE6 есть некоторые элементы, которые наследуют поля своих родительских элементов.Очень странно...
Попробуйте это исправление: http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html
Попробуйте что-то вроде этого:
#yourDiv { padding:1.2em; margin-right:2.4em; }
где #yourDiv — это идентификатор элемента div, содержащего ваши теги (у меня была проблема с входными данными).