Question

我创建了一个使用无序列表的网站。这些列表使用CSS中使用list-style-image属性的图像（在某些ul上打勾，在其他列表上交叉）。它适用于所有浏览器，IE7除外。

当在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>

这是一个奇怪的问题，也是我以前从未遇到的问题。

Answer 1

IE7中有一个已知的错误。浮动列表项不会显示任何列表标记图像。

但是你可能会使用背景图像和一些填充来实现相同的功能。

<强>更新

以下是网站点参考链接：http://reference.sitepoint.com/css/list-style-image#compatibilitysection

Answer 2

正如Leo所说，你将不得不使用背景图片：

#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 */
}

IE7在无序列表上不显示列表样式图像？

2 个答案: