Позиция IE7: фиксированная проблема и проблема на полях - PullRequest
Новая
       32

Позиция IE7: фиксированная проблема и проблема на полях

2 голосов
/ 22 августа 2011

В настоящее время у меня есть настройка HTML, которая выглядит следующим образом: 

<section class="topBar">The site's permanent top bar</section>
<header class="body">Some header info here</header>

И настройка CSS, например: 

.body { clear: both; margin: 0 auto; width: 600px; }

header {
height: 46px;
margin: 30px auto 20px auto;
}

.topBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

Цель состоит в том, чтобы topBar оставался в верхней части страницы, а заголовок и все после него прокручивалось под ним.

Это по большей части работает нормально. Проблема заключается в том, что верхнее поле заголовка игнорируется, пока topBar имеет position: fixed (поэтому, когда страница загружается, заголовок в значительной степени скрыт под topBar).

Я пытался изменить заголовок с поля на верх, и это тоже не помогает.

Как исправить игнорируемое поле наверху?

Вот собственно отчет об ошибке с тестовой страницей, чтобы показать проблему:

Сообщение об ошибке: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

Тестовая страница: http://feragnoli.com/ie7/

Ответы [ 2 ]

2 голосов
/ 22 августа 2011

добавьте padding-top: 250px к тегу body и удалите поле margin из .lower div

1 голос
/ 20 апреля 2013

Поместите SECTION.topBar под HEADER.body: 

<header class="body">Some header info here</header>
<section class="topBar">The site's permanent top bar</section>

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

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

...