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;
}

a标签不跨越div的100％宽度和高度。奇怪的是，通过从div中删除图像并且只有一个标签，它在包括IE在内的所有浏览器中都能正常工作。

当div中有图像时，有没有人知道a标签会发生什么？

Answer 1

使用display:block和left:0; right:0; top:0; bottom:0获得100％的宽度和高度。见http://jsfiddle.net/fliptheweb/RESTy/

Answer 2

尝试删除位置声明并将图像用作锚点的背景。

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

锚是内联元素，它不会接受高度和宽度。给予一个位置有效地将其设置为块元素，但它也可能具有其他效果。试试这个，看看会发生什么：）

Answer 3

只需使用

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

样本： http://jsfiddle.net/a4GAW/3/

<强>更新

如果单击img，则可以使用此解决方法

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

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

CSS - IE中的标签宽度和高度

3 个答案: