Проблемы позиционирования в IE7 (абсолютное и фиксированное позиционирование для верхней панели, которая остается на месте)

Question

Мне нужно расположить верхнюю панель, которая остается фиксированной, панель объявлений под ней, а затем контент. Для лучшего пользовательского опыта (а мне лучше SEO), я хочу, чтобы контент загружался первым, а не ждал объявления. Таким образом, содержание выше в HTML. Это работает во всех современных браузерах, но IE 7 является проблемой.

Вот эта страница

При первой загрузке кажется, что она загружается с правильным заполнением, но после загрузки двух других элементов div сверху содержимое перемещается вверх и прячется за двумя верхними элементами.

Другие проблемы с IE7: - положение guillemot (>>) в списке Top 10 справа. - Когда вы прокручиваете страницу вниз, внизу справа появляется поле. Положение кнопки закрытия (x) в этом поле неверно в IE7.

Я думаю, что лучшим решением будет отдельный файл IE7Fixes.css, который я могу прекратить использовать, когда доля IE7 на рынке упадет. Но я был бы признателен за любые предложения о том, что именно поместить в этот файл:)

Answer 1

Похоже на ошибку, описанную здесь: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

представьте, что вам нужен фиксированный слой вверху страницы и все следует для прокрутки под этим слоем.

Видимо, Explorer 7 не может рассчитать верхнюю границу для div "position: относительный", который следует за позиция: фиксированная с более высоким z-индексом. Второй слой будет просто придерживайтесь верхней части страницы, независимо от того, какой верхний край (sic) вы определили для это.

Для меня сработало удаление margin-top: 200px из dfncontainer и добавление его вместо padding-top в body. Однако, хотя это исправляет макет (насколько я могу судить) в IE7, он добавляет слишком много отступов в IE8 и IE9 (не тестировал другие браузеры), поэтому, похоже, необходима таблица стилей только для IE7.

---

Для гильотов я нашел этот вопрос / ответ о переполнении стека , который кажется приемлемым:

.list-box OL LI {
    position: relative;
}

.list-box .guillemot {
    /* <<delete these rules>>
      float: right;
      margin-right: 7px;
    */
    position: absolute;
    right: 7px;
}

Хорошей новостью является то, что исправление работает и в IE8, и в IE9, поэтому вам, вероятно, не нужна таблица условных стилей.

Положение кнопки X в поле «См. Также» можно также позиционировать, используя комбинацию position: absolute и top и right вместо плавающего для получения согласованного поведения.