在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水平菜單中使用精靈

回答

相關問題