фоновое изображение в IE

Question

Html

<div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;">
    <div id="Hi">
                some text here...
        </div>  

    <div id="loader">
        <img src="images/ajax-loader.gif"  />
        </div>
    </div>

Css

#banner {
    background-color: #e7e7e7;
    min-height: 285px;
}

приведенный выше код прекрасно отображается в Mozilla и Chrome. Сбой полностью в IE 6/7/8. Фоновое изображение просто не отображается. Я вижу текст, хотя.

Что я делаю не так ...?

РЕДАКТИРОВАТЬ: это не проблема пути изображения. я также пытался дать абсолютный путь. не работал.

Answer 1

Вам необходимо указать высоту для правила #banner css, так как вы используете min-height, который не поддерживается IE

положить

height:auto!important;
height:285px;
min-height:285px;

и оно должно работать ..

Answer 2

Решил это. причина, по которой изображение не показывалось, заключалась в том, что я не упомянул ограничения высоты / ширины. Что я могу сказать, IE просто выводит зло из всех.

Answer 3

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

 #loader {
        background-image:url (images/ajax-loader.gif);
/*Don't forget to set width and height to the size of your loader image here*/
        }

Также попробуйте сохранить ваши стили полностью в CSS, кажется, что у вас есть встроенный стиль, а также стили cSS с вашим идентификатором баннера, и если вы хотите использовать его более одного раза на странице, измените его на класс а не идентификатор: используйте .loader вместо #loader в CSS и HTML <div class="loader">&nbsp;</div>.   - это пробел без разрыва, просто не визуальный заполнитель для отображения вашего DIV.

Кроме этого, путь к изображению может быть поврежден, но я никогда не слышал о том, чтобы IE испортил путь к изображению иначе, чем в других браузерах.