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 / :after browser support chart。

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

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

IE 7中的CSS Sprites不起作用？

1 个答案: