IE 7中的CSS Sprites不起作用？

我想爲每個無序列表實現項目符號樣式。我有那個精靈圖像，並且我實現了它。我從下面的鏈接中獲取了示例。

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

IE 7中的CSS Sprites不起作用？

它工作正常，除了在IE7.The相同教程中，我想在IE7 also.How運行我能實現嗎？

 <!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>

來源

2013-02-13 svk

嘗試使用background-image：屬性而不是背景：。你還必須做一個背景重複：不重複，不包括重複部分在背景圖像：部分。即時有時很挑剔。 – Rooster 2013-02-13 22:56:26

IE7不支持:before僞選擇器，因此大多數這些樣式都不起作用。

請參閱:before/:afterbrowser support chart。

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

在測試頁之前：http://ie7-js.googlecode.com/svn/test/before.html

來源

2013-02-13 22:57:30 zakangelle

有沒有其他辦法可以達到這個目的？ – svk 2013-02-13 23:00:49

+1。它只在IE8中引入。你不能在IE7中使用這種技術。我的建議：不要再浪費時間來支持IE7了;世界上仍然有四個人使用它作爲他們的主要瀏覽器並不在意這種方式。 – Spudley 2013-02-13 23:00:51

@svk - 我已經更新了我的答案，以包含對IE7的修復。 – zakangelle 2013-02-13 23:04:00

IE 7中的CSS Sprites不起作用？

回答

相關問題