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

Я создал это JSFiddle .Я думаю, что вы пропустили :hover на #topdevelopments a span.go.

Редактировать , хотя это, кажется, работает, вы теряете значок курсора на появляющихся ссылках!Вы могли бы исправить это с помощью большего количества CSS, но это выглядит немного грязно.Если другое решение работает, оно может быть более элегантным.

Answer 2

добавить:

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

IE любит правило на a:hover перед тем, как активировать его расширение, например a:hover span

все будет делать, пока это не объявлено в a правиле

т.е.. Я выбрал text-indent: 0, так как это значение по умолчанию, которого нет в правиле a