Исправление или устранение неполадок в диалоге jQuery в IE6 - основные проблемы с макетом, когда диалоговое окно содержит форму

Question

Я работаю с диалогом jQuery, который содержит форму. В ie6 есть пара необъяснимых дюймов заполнения над формой. Когда я удаляю форму из разметки, самые серьезные проблемы с компоновкой исчезают. Я пробовал это без темы (по умолчанию), Флоры и моей темы themeroller, и все они, кажется, имеют ту же проблему.

Я пытался вносить различные изменения в CSS диалогового окна, но, похоже, ничего не дает никакого эффекта, и при создании диалога все равно пишется большое количество встроенных CSS, которые не позволяют другим стилям применять.

Я пытался установить свойства css в самой форме, такие как плавающая область, исключить поля и отступы, отображать inline и т. Д., Но пока форма там, есть дополнительный интервал. Кто-нибудь смог найти обходной путь для этого? Я бы предпочел не взламывать его и иметь элементы управления формой без тега формы.

Спасибо.

Answer 1

Всякий раз, когда мне нужно создать тему CSS для существующего сайта, форума, виджета и т. Д., Я всегда начинаю с того, что убираю все таблицы стилей и нормализую все поля и дополняю до 0 для каждого основного HTML-элемента DOM. Это особенно важно, когда дело доходит до встроенного CSS.

То, что вы должны попробовать, это удалить любой встроенный CSS на самом элементе формы. Затем попробуйте что-то вроде:

form {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Переполнение приручения в IE6 часто решает множество проблем с маржой. Попробуйте временно установить границы для всех элементов HTML, используя следующий стиль, чтобы увидеть, не переполняются ли предыдущие элементы в пространстве формы.

* {
    border: solid 1px #FF0000;
}

Если вы видите границы, наложенные на форму, то вам следует попытаться обуздать и переполнение этого элемента.

Answer 2

У меня раньше была похожая проблема с кнопками и необъяснимыми полями. В IE6 есть некоторые элементы, которые наследуют поля своих родительских элементов. Очень странно ...

Попробуйте это исправить: http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html

Answer 3

Перед изменением CSS убедитесь, что ваша страница имеет правильный тип документа.

Если у него нет типа документа, браузер будет отображать в режиме 'quirks' , и многие вещи будут выглядеть не совсем правильно.

Answer 4

Попробуйте что-то вроде этого:

#yourDiv { padding:1.2em; margin-right:2.4em; }

где #yourDiv - это идентификатор div, который содержит ваши теги (у меня была эта проблема с входами).