CSS :before Pseudo-element not displaying background-image with IE8

标签 css internet-explorer-8 background-image pseudo-element

我开始使用 :before 伪元素在列表中的 anchor 文本之前显示 Logo 。

我已按照 Nicolas Gallagher 的说明进行操作,但背景图像未在 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>

最佳答案

IE8 在标签上的 float 和特定宽度/高度值方面存在多个问题。尝试添加“zoom:1”来触发 haslayout 并看看是否有帮助。

关于CSS :before Pseudo-element not displaying background-image with IE8,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7932359/

相关文章:

javascript - jQuery tablesorter - 向表行添加样式的 IE8 问题

css - 使用 FontAwesome 垂直对齐非常长的文本

html - CSS 中心菜单

css - Angular ng-show 在 IE7/8 中不起作用

html - 多个背景图像 - 只需要一个来覆盖

javascript - 如何使用 JQuery 替换 CSS 背景图片并保持渐变?

c++ - QDialog - 设置背景图片

html - 为什么静态元素的 "margin-top"属性会影响绝对元素的 "top"属性?

html - CSS:使用 element:hover 伪类选择不相关的元素

css - 在 IE 中使图像在两条线之间居中