IE 7 中的 CSS 精灵不起作用？

Question

我想为每个无序列表实现项目符号样式。我有它的精灵图像。我实现了它。我从下面的链接中获取了示例。

http://www.cssbakery.com/2012/08/css-list-with-icon-sprites.html

除了在 IE7 中它工作正常。我也想在 IE7 中运行相同的教程。我怎样才能实现它？

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>CSS Sprites for Bullets</title>
<!--[if lt IE 8]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <style>
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; padding:0;
    }

    .bullet li 
    {
            // padding-top: 5px;  
             padding-left: 20px;
             //margin-bottom: 15px;
             //line-height:1.5em;
             //position: relative;
    }
    .magento li:before 
    {
         display: inline-block;
         position: absolute;
         margin: 9px 0 0 -20px;
         min-height: 9px;  
         background: url(images/bulletsprite.png) no-repeat -116px 0px;
         content:"";
        // vertical-align: middle;
         width: 9px; 
         height: 9px;
         float:left;
    }
           </style>
     </head>
<body>
<div>
    <p>Magenta</p>
    <ul class="magento bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>  
       </body>
       </html>

Answer 1

IE7 不支持:before 伪选择器，因此这些样式中的大多数都不起作用。

见:before/:afterbrowser support chart。

您可以使用IE8.js 使:before 在IE7 中工作。

测试页前：http://ie7-js.googlecode.com/svn/test/before.html