在 UL 水平菜单中使用精灵
我使用 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：
它松散地基于 jQuery UI 库中的 CSS。它使用 ui-accordion-header 类嵌套在 div 中。我尝试过的所有调整都没有产生任何影响。
我错过了什么吗？它正在拉低精灵；位置正确；当活动类应用于其他项目时，它们会正确显示。这很奇怪。
谢谢， 索伦
I'm using a UL to display the options for data visualizations on a site. The items are displayed inline and retrieve the image from a sprite png. This works fine in FireFox 3x, but in Chrome and Safari, the first item disappears. If I replace the sprites with the individual images, all of the list items display properly.
Here's the 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;}
And the 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>
It's loosely based on the CSS from the jQuery UI library. And it's nested in a div using the ui-accordion-header class. None of the tweaks I've tried have made a difference.
Am I missing something? It's pulling down the sprites; the positions are correct; the other items display properly when the active class is applied to them. It's just odd.
Thanks,
soren
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
“ui-corner-all”类的 CSS（如果有）是什么？我想你的答案就在那里。
What is the CSS, if any, for the class 'ui-corner-all'? I think your answer lies there.
原来是li中div的display:inline属性干扰了Chrome和Safari的显示。一旦我删除它，第一个项目就会正确显示。
Turns out it was the display:inline property on the div in the li that interferes with the display in Chrome and Safari. Once I removed that, the first item displayed properly.