css - 在UL水平菜单中使用 Sprite

我正在使用UL在网站上显示数据可视化的选项。这些项目以行内显示，并从sprite png检索图像。在FireFox 3x中可以正常工作，但是在Chrome和Safari中，第一项消失了。如果我用单个图像替换精灵，则所有列表项都会正确显示。

这是CSS：

ul {margin:5px 0 0;padding:10px 6px 6px;}
li {display:inline;padding:cursor:pointer;padding:11px 2px 2px 5px;}
li.active {border:1px solid #ccc;background-color:#fff;}
li div {display:inline;padding:6px 10px;}
.bttns {background-image:url('../sprites.png');background-repeat:no-repeat;}
.bttns-info {background-position: 0 -726px;height:16px;width:16px;}
.bttns-table {background-position: 0 -330px;height:16px;width:16px;}
.bttns-chart {background-position: 0 0;height:16px;width:16px;}

和HTML：
    <ul>
<li class="active ui-corner-all"><div class="bttns bttns-info"></div></li>
<li><div class="bttns bttns-table"></div></li>
<li><div class="bttns bttns-chart"></div></li>
</ul>

它大致基于jQuery UI库中的CSS。它使用ui-accordion-header类嵌套在div中。我尝试过的任何调整都没有起到什么作用。

我想念什么吗？它正在拉下精灵。位置正确；将活动类应用于其他项目后，其他项目将正确显示。这很奇怪。

谢谢，
ren

最佳答案

什么是“ ui-corner-all”类的CSS（如果有）？我想你的答案就在那里。