CSS - ширина и высота тега в IE

Question

У меня есть следующий код, который отлично работает во всех браузерах, кроме IE.

<div class="hovertest">
    <img src="myimage.jpg" width="200" height="100" alt="myimage" />
    <a href="link.html">&nbsp;</a>
</div>
<br /><br />
<div class="test">test2</div>

jquery:

$("a").hover( function () {
    $(".test").fadeOut();
}); 

css:

div {
    width:200px;
    height:100px;
    background-color:#B22;
    position:relative;
}

a {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    text-decoration:none;
}

тег не охватывает 100% ширины и высоты div.Странно то, что, удаляя изображение из div и имея только тег там, он прекрасно работает во всех браузерах, включая IE.

Кто-нибудь знает, что может происходить с тегом, когда естьизображение в div?

Answer 1

Используйте display:block и left:0; right:0; top:0; bottom:0 для 100% ширины и высоты.Посмотреть это http://jsfiddle.net/fliptheweb/RESTy/

Answer 2

Просто используйте

$("a, img").hover( function () {
    $(".test").fadeOut();
}); 

DEMO: http://jsfiddle.net/a4GAW/3/

Обновление:

Если вы нажмете img, вы можете использовать этот обходной путь

$("img").click(function(){
    document.location = $(this).next("a").attr("href");
}); 

DEMO: http://jsfiddle.net/a4GAW/5/

Answer 3

Попробуйте удалить объявления позиций и использовать изображение в качестве фона для якоря.

a {
    width:100%;
    height:100%;
    display: block;
    text-decoration:none;
    background-image: url(myimage.jpg);
}

Якорь - это встроенный элемент, он не будет принимать высоту и ширину как есть.Предоставление позиции эффективно устанавливает ее в элемент блока, но это может иметь и другие эффекты.Попробуйте это, посмотрите, что получится:)