24 位 PNG：悬停时不调整锚点上的背景位置 IE6

Question

我正在使用 IE6 的迟来的 PNG 修复：

http://www.dillerdesign.com/experiment/DD_belatedPNG /

像这样：

<!--[if lt IE 7]>
    <script type="text/JavaScript" src="/Scripts/DD_belatedPNG_0.0.8a-min.js" defer="defer"></script>
    <script type="text/JavaScript" src="/Scripts/DD_PNG_listing.js" defer="defer"></script>
<![endif]--> 

的选项卡列表

        <ul class="tabs">
            <li class="comparison"><a href="/"><span>Comparisons</span></a></li>
            <li class="scenario"><a href="/"><span>Scenarios</span></a></li>
            <li class="analysis"><a href="/"><span>Analysis</span></a></li>
        </ul>

我有一个带有 HTML:和 CSS:

#icis_dashboard .w_price_history .tabs 
{
    position:absolute;
    bottom:19px;
    right:5px;
    }

#icis_dashboard .w_price_history .tabs li
{
    height:98px;
    margin:0;        
    width:41px;
    }    

#icis_dashboard .w_price_history .tabs li a,
#icis_dashboard .w_price_history .tabs li a span 
{
    background:url("../images/icons/sprite_tabs.png") no-repeat 0px 0px;
    cursor:pointer;
    display:block;
    height:100%;
    text-indent:-99999px;    
    width:100%;    
    } 

#icis_dashboard .w_price_history .tabs li a:hover
{
    background-position: -51px 0px;   
    }

#icis_dashboard .w_price_history .tabs li.comparison a span
{
    background-position: 0px -110px;}        

#icis_dashboard .w_price_history .tabs li.comparison a:hover span 
{
    background-position:-50px -110px;    
    }

#icis_dashboard .w_price_history .tabs li.scenario a span 
{
    background-position: 0px -205px;}

#icis_dashboard .w_price_history .tabs li.scenario a:hover span
{
    background-position: -50px -205px;}

#icis_dashboard .w_price_history .tabs li.analysis a span
{
    background-position: 0px -285px;}    

#icis_dashboard .w_price_history .tabs li.analysis a:hover span
{
    background-position: -50px -285px;}

：但是，在悬停父锚点时，跨度不会更改 IE6 中的背景位置。

Answer 1

来自脚本（0.0.8）：

if (el.nodeName == 'A') {
    moreForAs = {mouseleave: 'handlePseudoHover', ...

即。它仅支持 a 元素上的 :hover 效果，而不支持其中的元素 (a:hover span)。

您也许可以尝试破解该行来检查您想要的其他元素，例如。

var tag= el.nodeName.toLowerCase();
if (tag==='a' || tag==='span') {
    ...

Answer 2

尝试向您的 span 元素添加填充。