Я использую 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><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>
Это свободно основано на CSS из библиотеки jQuery UI.И он вложен в div с использованием класса ui-accordion-header.Ни один из твиков, которые я пробовал, ничего не изменил.
Я что-то упустил?Это сносит спрайтов;позиции правильные;другие элементы отображаются правильно, когда к ним применяется активный класс.Это просто странно.
Спасибо, Сорен