IE7在無序列表上不顯示list-style-image？

我做了一個使用無序列表的網站。這些列表使用一個圖像（在某些ul上標記，在其他標記上交叉），這些圖像在CSS中使用list-style-image屬性。它在所有的瀏覽器中工作正常，除了IE7。IE7在無序列表上不顯示list-style-image？

當在IE7中查看頁面時，它們應該是顯示的列表，但它不顯示圖像，這與所有其他瀏覽器（IE8，IE9，Chrome，Firefox，甚至Safari）截然不同它起來並顯示它。

這裏的CSS：

#carousel ul.benefits { 
float: right; 
width: 573px; 
margin-right: 18px; 
margin: 0px; 
margin-top: 10px; 
padding: 0px; 
padding-left: 30px; 
} 

#carousel ul.benefits li { 
font-family: "OpenSansRegular",Tahoma,sans-serif; 
font-size: 1.8em; 
font-weight: normal; 
color: #bdbdbd; 
list-style-image:url('images/white-tick.png'); 
float: left; 
width: 100%; 
}

的HTML：

<ul class="benefits"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul>

這是一個奇怪的問題，一個我從來沒有遇到過的。

來源

2011-12-15 mickburkejnr

IE7中存在一個已知的bug。浮動列表項不會顯示任何列表標記圖像。

儘管如此，您也許可以使用背景圖像和一些填充來實現相同的功能。

更新

這裏是一個sitepoint參考鏈接：http://reference.sitepoint.com/css/list-style-image#compatibilitysection

來源

2011-12-15 12:11:22 Leo

謝謝，這聽起來愚蠢的，但如果我解除列表時間，它會工作？ – mickburkejnr 2011-12-15 12:19:36

利奧說，你必須使用背景圖片：

#carousel ul.benefits li { 
background: url("images/white-tick.png") no-repeat 2px 5px transparent; /*adjust 2px & 5px until it looks correct */ 
display: block; 
padding: 2px 4px 2px 20px; /*adjust until you have enough left padding to account for your bullet */ 
}

來源

2011-12-15 14:33:08

IE7在無序列表上不顯示list-style-image？

回答

相關問題