html - 如何让Chrome和IE正确显示 block 超链接

Question

我一直使用下面的代码来让链接填充它们容器的内容。 chrome 和 IE 现在都显示 链接内容的大小。

我已经尝试过显式像素高度和重要标签，但 chrome 仍然坚持让链接与内容大小一致。该链接没有内容，因此显示为 0 像素的高度和宽度。

这就是我制作 block 超链接的方式？

HTML

<div class="mydiv">
    <a href="#"></a>
</div>

CSS

.mydiv {
    height: 50px;
    width: 50px;
    display: block;
}
.mydiv a {
    height: 100%;
    width: 100%;
    display: block;
}

Answer 1

给你 - 在 Chrome 和 IE 中测试并在两者中工作:

这是 HTML:

<div class="abc">
    <a href="http://www.google.com"></a>
</div>

和CSS:

div.abc { display:block ;
    width:200px ;
    height:50px ;
    background:blue ;
}

.abc a { display:block ;
    width:100% ;
    height:100% ;
}

您可以在 div.abc 中编辑高度和宽度，超文本链接将相应调整。

此处演示:http://jsfiddle.net/PRZaX/