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 「被擱置在絕對定位在視圖外的」跨度「應該通過改變」頂部「參數進入視圖。這工作，但在IE6和IE7只有它失敗的工作。我無法弄清楚爲什麼。有人知道爲什麼

我會補充說，每個「A」鏈接都是左移的。

Answer 1

地址：

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

IE喜歡上a:hover的規則之前，它會激活它的擴展名，比如a:hover span

只要它尚未宣佈任何事情都會做的a規則

ie ie text-indent: 0，因爲它是一個默認的不是a規則

Answer 2

我創建了JSFiddle。我認爲你在#topdevelopments a span.go上缺少:hover。

編輯雖然這似乎工作，你失去了出現的鏈接上的光標圖標！你可以用更多的CSS來糾正，但看起來有點混亂。如果其他解決方案有效，它可能更優雅。