IE6,7 在链接悬停时，绝对定位不会在孩子上改变

Question

我有以下 HTML 和 CSS：

<div id="topdevelopments" class="colnm colw6 clearfix">
    <a href="homes-for-sale/development/beaufort-park-6/" class="colnm agreen colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="first">Recent development</span> 
            <span class="heading">Beaufort Park 6</span> 
        <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-5/" class="col apurple colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 5</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a> 
    <a href="homes-for-sale/development/beaufort-park-4/" class="col ablue colw2"> 
        <img src="wp-content/themes/philosophy/images/noimage/212x153.png" width="212" height="153" alt="No Image" title="No Image" />
        <span class="popup"> 
            <span class="heading">Beaufort Park 4</span> 
            <span class="content">1, 2 & 3 bedroom apartments available from £160,000</span> 
        </span> 
        <span class="ir corner">&nbsp;</span> 
        <span class="ir go">&nbsp;</span> 
    </a>
</div>

CSS：

#topdevelopments {

}
    #topdevelopments a {
        border:#4D4D4D 10px solid;
        display:block;
        color:#fff !important;
        font-family:"MetaPlusBookRoman", sans-serif;
        font-size:16px;
        height:153px;
        margin-bottom:10px;
        overflow:hidden;
        position:relative;
        width:212px;
    }
        #topdevelopments a span { display:block; }
        #topdevelopments a span.popup {
            height:133px;
            left:0px;
            overflow:hidden;
            padding:10px;
            position:absolute;
            top:153px;
            width:192px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        #topdevelopments a:hover span.popup { top:0px; }
        #topdevelopments a.agreen span.popup { background-color:#C1D82F; }
        #topdevelopments a.ablue span.popup { background-color:#36A6E8; }
        #topdevelopments a.apurple span.popup { background-color:#C6168D; }
        #topdevelopments a span.popup .first {
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            opacity:0.5;
        }
        #topdevelopments a span.popup .heading {
            border-bottom:#fff 2px solid;
            font-family:"MetaPlusBlackRoman", sans-serif;
            font-size:20px;
            margin-bottom:5px;
        }
        #topdevelopments a span.corner {
            background:url(images/corner/corner-dgrey.png);
            bottom:0px;
            height:40px;
            position:absolute;
            right:0px;
            width:40px;
        }
        #topdevelopments a span.go {
            bottom:4px;
            height:16px;
            position:absolute;
            right:4px;
            width:16px;
        }
        #topdevelopments a.agreen span.go { background-image:url(images/go/go-green.png); }
        #topdevelopments a.ablue span.go { background-image:url(images/go/go-blue.png); }
        #topdevelopments a.apurple span.go { background-image:url(images/go/go-purple.png); }
        #topdevelopments a.agreen:hover span.go { background-image:url(images/go/goh-green.png); }
        #topdevelopments a.ablue:hover span.go { background-image:url(images/go/goh-blue.png); }
        #topdevelopments a.apurple:hover span.go { background-image:url(images/go/goh-purple.png); }

应该发生的是，当“A”悬停时，绝对位于视图之外的“span”应该通过更改“top”参数进入视野。这有效，但仅在 IE6 和 IE7 中不起作用。我不知道为什么。有人知道为什么吗？

我要补充一点，每个“A”链接都是向左浮动的。

Answer 1

添加：

#topdevelopments a:hover {
  text-indent: 0;
}

IE 喜欢 a:hover 上的规则，然后才会激活它的扩展，例如 a:hover span

只要尚未在 a 规则中声明，任何事情都会做

即我选择了text-indent: 0，因为它是a 规则中尚未包含的默认值

Answer 2

我创建了这个JSFiddle。我想你在#topdevelopments a span.go 上错过了:hover。

编辑虽然这似乎可行，但您会丢失出现的链接上的光标图标！你可以用更多的 CSS 来纠正它，但它看起来有点乱。如果其他解决方案有效，它可能会更优雅。