有z-index的问题和：之前：在IE8中的伪元素之后

Question

我在IE8上遇到兼容性问题（还有什么是新的？）它看起来像这样：

http://screencast.com/t/o6Is0q6EEn

设置代码的方式以及我希望尽可能做的方式是产品是一个列表项，包含图像和产品详细信息，它们看起来像

<li class="product ships-free on-sale">stuff</li>

CSS：

li.product.ships-free:before {
content: url(../img/ships_free.png);
width: 80px;
height: 66px;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}

li.product.on-sale:after {
content: url(../img/on_sale.png);
width: 80px;
height: 66px;
right: 0;
top: 0;
display: block;
position: absolute;
z-index: 10000;
}

这适用于Chrome和Firefox，但不适用于IE8。我还没检查过ie9。有关代码，请访问www.calleynye.com/exteriorsolutions。

理想情况下，我想找出一种方法来解决这个问题，而无需添加额外的跨度或div。我知道伪元素在ie的早期版本中不起作用，但如果它们根本没有出现，我就可以了。我只是不希望他们看起来搞砸了。

提前致谢！

Answer 1

您正在列表项目之前和之后插入图像。也许尝试使用自己的图像或代码中的定义列表插入它们。