Вертикальное отрицательное поле не работает в IE8?

впервые задаю свой вопрос здесь :)

Я работаю над веб-сайтом и попробовал расширить его по вертикали до нижней части окна клиента, используя обычный трюк:

html, body { height: 100%; }
.container { min-height: 100%; }

Затем я захотел чтобы добавить несколько заголовков над основным контентом и липкий нижний колонтитул внизу. Я обернул оба из них в их собственные контейнеры и вытащил верхний колонтитул наверх следующим образом:

.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }

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

.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }

Второй контейнер находится внутри первого, и в него я помещаю фактическое содержимое каждой страницы.

Итак, это прекрасно работает в Firefox 4/5 - Абсолютно ничего не выключено, все так, как задумано. Chrome тоже вроде нормально. Однако в IE8 он игнорирует отрицательный запас на .container (я проверял с помощью инструментов разработчика). Контейнер начинается после .top, и в результате между .top и .container-in имеется промежуток в 164 пикселей из-за поля .container-in.

И самое забавное - если я переключу IE8 на IE7 режим совместимости, эта проблема больше не возникает! Отрицательные поля отлично себя ведут в режиме IE7, но, конечно же, некоторые другие вещи не работают, поэтому указание IE использовать режим совместимости не вариант.

Любые идеи, как обойти эту проблему / использовать другое решение для получить одинаковый эффект во всех браузерах (IE7 не требуется)? Я что-то делаю не так?

EDIT: После еще нескольких забав и игр я обнаружил, что, заменив отрицательные поля отрицательными координатами top: (и установив все контейнеры как относительные), он отлично работает в IE8, но теперь он уходит зазор 222px под HTML-контейнером в firefox (согласно firebug). Смущает!

РЕДАКТИРОВАТЬ2: Я считаю, что знаю, что здесь не так, технически говоря. Internet Explorer 8 считает, что отрицательный запас - это «переполнение»,и поскольку overflow: hidden, он убивает маржу. Если я удалю overflow: hidden, у него больше не будет такого поведения, но он нарушит остальную часть дизайна. У кого-нибудь еще есть идеи?

6
задан Protected 8 July 2011 в 21:22
поделиться