HTML 源代码中没有嵌套链接元素的嵌套超链接区域

我想要一些看起来和行为都像大矩形（整页宽）内的超链接的东西，这也是超链接。下面是它应该是什么样子的 ASCII 艺术表示：

|-------------------------------------------|
| Some text  [_link_]                            |
|-------------------------------------------|
  

整个外部矩形（块元素）将成为超链接。在这个矩形内应该有一些文本，并且在该文本的末尾应该有另一个链接。

不幸的是，嵌套链接（A 元素）在 (X)HTML 中是非法的：

12.2.2 嵌套链接非法

A元素定义的链接和锚点不能嵌套； A 元素不得包含任何其他 A 元素。

(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2 http://www.w3.org/TR/html401/struct/links.html#h-12.2.2），所以上面的最自然的实现方式

<a href="xxx" style="display: block">
  Some text
  <a href="yyy">link</a>
</a>

不是有效的 HTML。更糟糕的是，某些网络浏览器在某些情况下enforce通过将内连杆元件移动到外连杆元件的闭合元件的外侧来满足此要求。这当然完全破坏了布局。

所以我想问的是如何到达layout上面使用 HTML 和 CSS（但没有 JavaScript）呈现，但是没有嵌套链接元素在 HTML 源代码中。如果行为尽可能接近嵌套链接元素的行为（对于在实现 HTML 标准方面不太严格的浏览器），那就太好了。

编辑 (16-01-2009)

澄清：使用两个以上链接元素的解决方案是完全可以接受的

<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...

你可以尝试这样的事情：

div.a {
  position: relative;
  background-color: #F88;
  z-index: 0;
}
a.b {
  position: relative;
  z-index: 2;
}
a.b:hover {
  background-color: #8F8;
}
a.c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
a.c:hover {
  background-color: #88F;
}
a.c span {
  display: none;
}

<div class="a">
  foo
  <a href="bar" class="b">bar</a>
  <a href="foo" class="c"><span>baz</span></a>
</div>