css: перед псевдо-элементом не отображается фоновое изображение с IE8

#css #internet-explorer-8 #background-image #pseudo-element

#css #internet-explorer-8 #фоновое изображение #псевдо-элемент

Вопрос:

Я начинаю использовать псевдоэлемент :before для отображения логотипов перед текстом привязки в списке.

Я следовал инструкциям Николаса Галлахера, но фоновые изображения не отображаются в IE8. Работает в других браузерах. Кто-нибудь видит, что я могу делать неправильно?

Я опубликовал пример здесь: http://vervedesignstudios.com/gb/testBefore.html

Вот разметка: заранее спасибо за ваш совет.

 <style>

/* Pseudo-element cropping bit */
.iLst24 li a:before {
    content:""; 
    float:left; 
    width:24px; 
    height:24px; 
    margin:0 6px 0 0; 
    background-image:url("images/HomeSprite.png");
    }

.iLst24 .fb a:before {background-position:0 0;}
.iLst24 .tw a:before {background-position:0 -50px;}
.iLst24 .yt a:before {background-position:0 -100px;}

</style>


<div class="iLst24">
    <ul>
        <li class="fb"><a href="http://www.facebook.com">Facebook</a></li>
        <li class="tw"><a href="http://www.facebook.com">Twitter</a></li>
        <li class="yt"><a href="http://www.facebook.com">YouTube</a></li>
    </ul>
</div>

Ответ №1:

IE8 имеет множество проблем с плавающими и определенными значениями ширины / высоты в тегах. Попробуйте добавить «zoom: 1» для запуска haslayout и посмотреть, поможет ли это.