Question

我正在使用UL来显示网站上数据可视化的选项。项目以内联方式显示，并从精灵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中。我尝试过的调整都没有产生任何影响。

我错过了什么吗？它正在拉下精灵;立场是正确的;当活动类应用于其他项时，其他项正确显示。这很奇怪。

谢谢，索伦

Answer 1

班级'ui-corner-all'的CSS是什么（如果有的话）？我想你的答案就在那里。

Answer 2

原来是显示：li中div的内联属性干扰了Chrome和Safari中的显示。删除后，第一项正确显示。

在UL水平菜单中使用精灵

2 个答案: