Вертикальное отрицательное поле не работает в 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 — абсолютно ничего не отключено, все так, как задумано. Хром тоже вроде нормально. Однако в IE8 игнорируется отрицательная маржа в .container (я проверял с помощью инструментов разработчика). Контейнер начинается после .top, и в результате между .top и .container-in есть зазор в 164 пикселя из-за поля .container-in.

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

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

РЕДАКТИРОВАТЬ: Еще немного повеселившись и поиграв, я обнаружил, что заменив отрицательные поля на отрицательные координаты top: (и установив все контейнеры как относительные), он отлично работает в IE8, но теперь он оставляет зазор в 222 пикселя ниже html-контейнера в firefox (согласно firebug). Смущенный!

EDIT2: кажется, я знаю, что здесь не так, технически говоря. Internet Explorer 8 считает отрицательное поле «переполнением», и, поскольку переполнение: скрыто, оно уничтожает поле. Если я удалю overflow: hidden, у него больше не будет такого поведения, но он сломает остальную часть дизайна. У кого-нибудь еще есть идеи?


html css margins internet-explorer-8
person Protected    schedule 08.07.2011    source источник
comment
Можете ли вы использовать jsFiddle?   -  person thirtydot    schedule 08.07.2011
comment
Я не знаю, как это использовать — я никогда не знал, — но я мог бы изучить это позже.   -  person Protected    schedule 08.07.2011

Ответы (2)


arrow_upward
3
arrow_downward

Об условных комментариях. Как создать таблицу стилей только для IE .

Попробуйте установить стиль только для IE8 с отрицательными координатами вершины:

<!--[if gte IE 8]>
<style>
.container { top: -164px; }
</style>
<![endif]-->
person VMAtm    schedule 09.07.2011
comment
О, спасибо за ответ. Это в значительной степени то, что я в конечном итоге сделал, хотя мне не нравится использовать хаки для конкретных браузеров. Ну IE ;) - person Protected; 11.07.2011
comment
@Защищенные взломы IE - необходимое зло :( - person VMAtm; 11.07.2011

arrow_upward
1
arrow_downward

У меня нет времени идти дальше этого: min-height глючит в IE7. Перейдите сюда для получения дополнительной информации об этом: http://www.webdevout.net/browser-support-css

person Rob    schedule 09.07.2011
comment
Спасибо, но этот вопрос касается IE8! - person Protected; 11.07.2011
comment
@Protrected - Да, но вы заметили, что это работает в IE7. Это началось как ответ, но должно было быть комментарием. - person Rob; 11.07.2011
comment
Я имел в виду отрицательные поля в контейнере со скрытым переполнением :) - person Protected; 11.07.2011