在UL水平菜单中使用精灵

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

这里的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中。没有任何我尝试过的调整有所作为。

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

感谢，索伦

来源

2010-09-30 soren

此问题是特定于'bttns-info'还是列表中的第一项？如果您重新排列菜单，问题是否遵循bttns-info，或者保留在第一个项目上？ – mkoistinen 2010-09-30 21:46:38

检查语法：padding：li上的光标 – 2010-09-30 22:20:41

什么是CSS，如果有的话，为类 'UI刀尖所有'？我想你的答案就在那里。

来源

2010-09-30 21:54:28 mkoistinen

填充：光标在这里只是一个错字。当我重新排序项目时，会出现bttns-info图像，但新的第一项消失。所以bttns-table不再可见。 – soren 2010-10-01 15:16:15

另外，ui-corner-all是jQuery UI库中的一个类，就是这样：-moz-border-radius：4px; -webkit-border-radius：4px; – soren 2010-10-01 15:17:14

如果将其删除，该怎么办？ – mkoistinen 2010-10-01 15:43:05

原来这是显示器：在li上的div中的内联属性干扰了Chrome和Safari中的显示。一旦我将其删除，第一项显示正确。

来源

2010-10-27 20:46:23 soren

在UL水平菜单中使用精灵

回答

相关问题