我正在使用 UL 在网站上显示数据可视化选项。这些元素以内联方式显示,并从 sprite png 中检索图像。这在 FireFox 3x 中运行良好,但在 Chrome 和 Safari 中,第一项消失了。如果我用单个图像替换 sprite,所有列表项都会正确显示。
这是 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><br/>
<li class="active ui-corner-all"><div class="bttns bttns-info"></div></li><br/>
<li><div class="bttns bttns-table"></div></li><br/>
<li><div class="bttns bttns-chart"></div></li><br/>
</ul>
它大致基于 jQuery UI 库中的 CSS。它使用 ui-accordion-header 类嵌套在一个 div 中。我尝试过的所有调整都没有起到任何作用。
我错过了什么吗?它正在拉下 Sprite ;位置正确;其他元素在应用事件类时会正确显示。这很奇怪。
谢谢, 索伦
最佳答案
“ui-corner-all”类的 CSS(如果有的话)是什么?我认为您的答案就在那里。
关于css - 在 UL 水平菜单中使用 Sprite ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3834815/