IE не центрирует эти изображения, есть ли исправление? - PullRequest
Новая
       23

IE не центрирует эти изображения, есть ли исправление?

0 голосов
/ 03 августа 2010

Мой HTML + CSS рисунок

Моя проблема с этой страницей заключается в том, что изображения «Средняя школа», «Средняя школа» и «Начальная школа» прекрасно центрируются во всех браузерах, кроме IE6, 7 и 8.

Соответствующие части страницы: ( Отредактировано для ясности )

CSS: 

#block {
    clear: both;
    width: 682px;
}
.education_level_wrapper {
    float: left; 
    width: 100%;
}
.education_level {
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

HTML: 

<div id="block">
    <div class="education_level_wrapper">
        <img src="[sniped]/Title_HS.png" class="education_level" />
    </div>
</div>

IE:

alt text

Chrome:

alt text

Что я здесь не так делаю?

EDIT:

См. Исправленную версию здесь: Неархивированная графика . Приведенная выше ссылка была снимком, который оставался неизменным для архивных целей.

Ответы [ 2 ]

1 голос
/ 03 августа 2010

Добавьте к своей странице <!DOCTYPE HTML>, чтобы браузеры пытались соответствовать спецификации CSS.

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

Техническое объяснение состоит в том, что в режиме IE6 quirks автоматическое ограничение не будет работать без использования стандартного режима. Обходной путь, если вам нужно использовать режим причуд, - это применить text-align:center к родительскому элементу. Но вы должны использовать стандартный режим, он же нормальный режим.

0 голосов
/ 04 августа 2010

Атрибут float: left в функции education_level_wrapper является вероятной причиной этой проблемы.

Используйте поле для настройки позиционирования, а не

поплавок

...