Почему мое повторяющееся фоновое изображение PNG не отображается в IE7 или IE8?

Question

Я пытаюсь преобразовать PSD в HTML, и я столкнулся с проблемой. Мой сайт работает во всех основных браузерах, кроме IE8 и IE7. Фон не отображается в IE8 и IE7.

Фон - изображение PNG, и оно повторяется. Я знаю способ для повторных изображений, но для повторных изображений, что мне нужно делать? Вот CSS, который я использовал:

#footer-top { 
    padding: 20px 0; 
    background: url('img/footer-bg.png')repeat; 
    width:100%; 
    overflow:hidden; 
    margin-top: 38px; 
} 

Answer 1

Посмотреть сообщение в блоге PNG background-repeat bug in Internet Explorer 7 and 8

Он говорит:

Видимо Internet Explorer 7 и 8 до сих пор не получили PNG совсем правильно. Во время работы над одним из моих текущих проектов я наткнулся на ошибку с повторением фоновых изображений PNG.

Для этого проекта у меня есть шаблон страницы с несколькими элементами контейнера, которые имеют один пиксель на 1 пиксель PNG-фон, который повторяется, и он отлично смотрится при тестировании его в IE 7 и IE 8. Итак, я создал мой следующий шаблон страницы с тем же стилем. На этот раз IE 7 и 8 забились при обработке фонового повтора. Вместо повторения оба этих браузера необъяснимо пытались растянуть изображение 1 × 1 по всему контейнеру. У PNG было 60% альфа-прозрачности, но я не уверен, что это важно. Сотрудник предложил вместо этого сделать изображение размером 10 × 10 пикселей, чтобы посмотреть, что произойдет. Сюрприз Сюрприз. Это исправило это.

Я сделал немного больше поисков, чтобы узнать, встретил ли кто-нибудь еще это и нашел это последнее сообщение в блоге. Автор также обнаружил, что эта ошибка возникает случайным образом и что изображение размером 4 × 4 разрешило его проблему. Поскольку разница между размером файла 10 × 10 и 1 × 1 невелика, я буду придерживаться 10 × 10. Но я согласен с ним в том, что эта ошибка создала классный эффект, и было бы здорово, если бы ее можно было тиражировать по своему усмотрению.

Answer 2

Возможно, вам понадобится место до repeat?

background: url('img/footer-bg.png') repeat; 

(у меня нет IE7 или 8 под рукой, чтобы проверить это.)

Answer 3

я дорогой, я нашел самый простой способ. Просто попробуйте

background-image:url(images/back-bg.jpg) !important; 
background-repeat:repeat !important; 
background-color:#fff !important; 
background-position:left !important;