IE7 игнорирует поля в div после абсолютного позиционного div

Question

У меня есть два div внутри контейнера, первый имеет абсолютное позиционирование.В ie7 второй div явно игнорирует верхнее поле.Кажется, что заполнение работает нормально, но по визуальным причинам я должен использовать margin.

Я знаю, что виновником является div с абсолютным позиционированием, потому что, если я удаляю его, следующий div работает нормально.происходит только в ie7 (даже не в ie6).

Помогите!

Редактировать: Я только что нашел решение, которое состоит в том, чтобы дать родительский div padding-top только для ie7.Так что я просто хотел бы знать, почему это происходит, и если есть, более чистое решение, но мне не нужно больше грязных хаков ..

Answer 1

Это то, что мы называем обвалом маржи. Вы также можете попытаться позиционировать второй div.

Вы можете найти больше информации о разрушении полей.

Просто проверьте приведенные ниже условия, если они есть в вашем коде, прежде чем читать всю статью целиком.

элементы BODY никогда не участвуют в маржа рушится, так как они считается магическим, что означает иногда странный разрыв не показывает в Internet Explorer, когда это происходит в других браузерах, когда крах случается с вершиной ТЕЛА. это обычно легко решить; просто предотвратить коллапс для другого браузеры, и это работает в Интернете Исследователь тоже. (Обратите внимание, что HTML поля элемента никогда не падают в любой браузер, это правильно поведение.)

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

Более проблемная ошибка вызвана Internet Explorer странный hasLayout поведение. Это фундаментальная ошибка в Internet Explorer 7 - и влияет несколько других вещей, но это статья будет касаться только маржи рушится. Установка определенных стилей на элемент делает его «иметь макет» ( концепция, уникальная для Internet Explorer, и не соответствует каким-либо стандартам). Наиболее распространенный стиль, который вызывает проблема в ширине. Когда элемент hasLayout внезапно предполагает минимальная высота 1em, и если установлено что-то меньшее в Internet Explorer 6, например 0.5em, он все еще использует 1em.

Элемент имеет макет, если выполняется одно из следующих условий:

• Имеет указанную ширину и / или высоту
• Это встроенный блок (отображение: встроенный блок)
• имеет абсолютное позиционирование (позиция: абсолют)
• Это число с плавающей точкой (float: left, float: right)
• Это элемент таблицы
• Преобразуется (style = "zoom: 1")

Высота обычно не вызывает проблема, так как установка высоты будет предотвратить падение в других браузерах тем не мение. Тем не менее, запуск hasLayout на вложенном элементе, где родитель предотвратил разрушение маржи, используя границы или отступы, могут привести к полям исчезнуть или провалиться родитель независимо от заполнения или границы. Как правило, hasLayout является беспорядок, и лучше всего избегать его в места, где маржа имеет решающее значение.

Надеюсь, это поможет вам справиться с вашими проблемами.

Answer 2

В моем случае ничто выше не помогает.Я использую дополнительный DIV между этими элементами.Этот дополнительный DIV имеет четкие значения: оба, flot: нет и т. Д. См. http://starikovs.com/2010/12/24/ie7-margin-top-and-absolute-pos-element/ для получения дополнительной информации.

Answer 3

Я использовал положение: статическое;на большем div (с позицией: относительно содержимого внутри) на игнорируемом поле для исправления IE7.Меньший левый столбец остался в позиции: абсолютный.Это использовалось на вертикальной вкладке Jquery.

http://code.google.com/p/jquery-vert-tabs/downloads/detail?name=jQuery%20Vertical%20Tabs%201.1.4.zip&can=2&q=