Лучшая работа для сломанной модели коробки в IE6 с учетом отступов?

Question

Я заметил, что и IE6, и IE7 толкают родительский div вниз, когда элемент внутри имеет padding-bottom ... что является лучшим решением для этого? Можно ли это исправить с помощью действительного css?

EDIT

Решением, которое я использовал, было установить overflow: auto в дочернем элементе (как указано ниже в принятом ответе). Я использовал этот подход, потому что высота моего дочернего элемента была динамической, и поэтому я не мог ее установить.

Answer 1

padding-bottom добавляется к общей высоте дочерних элементов, поэтому, даже если дочерний элемент пуст, padding-bottom: 10px; даст ему общую высоту 10px. И во всех современных браузерах родительский элемент будет расширяться, чтобы освободить место для его дочерних элементов.

Но если вы хотите установить высоту для родителя, вы можете просто установить высоту для родителя и управлять содержимым дочернего элемента с помощью переполнения: auto / hidden / scroll.

Или вы можете установить родителя как положение: относительное; и установите положение: абсолютное; к дочернему элементу.

Вид зависит от того, что вы хотите ..

Answer 2

Я не видел, чтобы IE8 или Firefox "толкали родителя", когда к дочернему элементу применено заполнение; просто высота родительского элемента увеличивается для размещения дочернего элемента. Это правильное автоматическое поведение в CSS. Я сделал краткое демо:

http://robertgrant.org/testbed/paddingbottom.xhtml

Не стесняйтесь попробовать его в IE6 / IE7 и посмотрите, что произойдет (для работы ссылки требуется Javascript, но вы можете видеть, что происходит, даже без этого)

Если вы хотите ограничить высоту родителя, установите ее (например, height: 100px) и установите для свойства overflow значение hidden.

Answer 3

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

Если вы по-прежнему получаете дополнительный отступ в определенной версии IE, используйте условный комментарий , чтобы добавить дополнительную таблицу стилей для этого браузера.