Я использую следующий код для оценки звезд. Код отлично работает в Firefox, но в IE6 он отстой (как обычно). Звезды даже не появляются в IE6, хотя они работают отлично.
он использует спрайты для отображения звезд. Кроме того, я исправил проблему прозрачности PNG в IE6.
<div id="ajaxratemasuga"><div class="ratingblock">
<ul style="width: 90px;" class="rating" id="unit_ul1730">
<li style="width: 0px;" class="current-rating">Currently 0.00/3</li>
<li><a rel="nofollow" class="r1-unit rater" title="1 out of 3" href="javascript:direct_rating1('/videos-103415','1','1730','59.92.50.233','5','0')">1</a></li>
<li><a rel="nofollow" class="r2-unit rater" title="2 out of 3" href="javascript:direct_rating1('/videos-103416','2','1730','59.92.50.233','5','0')">2</a></li>
<li><a rel="nofollow" class="r3-unit rater" title="3 out of 3" href="javascript:direct_rating1('/videos-103417','3','1730','59.92.50.233','5','0')">3</a></li>
</ul>
</div></div>
CSS
.rating {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/starrating.png) repeat-x scroll left top;
height:30px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}
.unit-rating a.r1-unit:hover {
width:18px;
}
.unit-rating a.r1-unit {
left:0;
}
.unit-rating li a {
display:block;
height:30px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:0;
position:absolute;
text-decoration:none;
text-indent:-9000px;
width:18px;
z-index:20;
}
Я не уверен, предоставил ли я весь необходимый CSS. Если вам нужно больше, пожалуйста, проанализируйте, пожалуйста, прокомментируйте.