我正在使用以下代码进行星级评分。该代码在firefox中工作正常,但在IE6中却像往常一样糟糕。尽管它们运行良好,但它们甚至在IE6中都没有出现。
它使用精灵来显示星星。另外,我已经修复了IE6的PNG透明性问题。

<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。如果您需要更多请分析,请发表评论。

最佳答案

据我所知,双螺旋解决方案不会让背景图像重复。最好使用DD_BelatedPNG,它允许背景重复和定位。

关于css - IE6中的CSS Sprites,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1810825/

10-12 00:13
查看更多