这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是，您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为这违背了标记验证的目的，标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不需要验证，但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外，使用onclick不会为屏幕阅读器提供语义信息，以确定div是作为链接使用的。

这个例子很适合我:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

这篇文章是旧的，我知道，但我不得不解决同样的问题，因为简单地写一个普通的链接标签，显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。

首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击，它只使该div/a标签内的文本/图像可点击。

解决方案:用烘焙图像填充div，并隐藏它不让查看器看到。

如何? 你问得好，现在听好了。 将此背景样式添加到a标签

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

现在整个div都可以点击了。这对我来说是最好的方式，因为我在我的图片库中使用它，让用户点击图像的一半左右移动，然后放置一个小图像，只是为了视觉效果。所以对我来说，我使用左右图像作为背景图像!

虽然我不建议在任何情况下这样做，但下面是一些代码，它将DIV转换为链接(注意:本例使用jQuery，为了简单起见，删除了某些标记):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

还有一个没有提到的选项是使用flex。通过对a标记应用flex: 1，它将展开以适应容器。

div { 身高:100 px; 宽度:100 px; 显示:flex; 边框:1px实体; ｝ 一个{ flex: 1; ｝ < div > 链接< a href = " http://google.co.uk " > < / > < / div >

这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是，您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为这违背了标记验证的目的，标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不需要验证，但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外，使用onclick不会为屏幕阅读器提供语义信息，以确定div是作为链接使用的。