我想要有一些看起来和表现为超链接在更大的矩形(全页宽),也是超链接的东西.下面有ASCII艺术表现形式：
|-------------------------------------------| | Some text [_link_] | |-------------------------------------------|
整个外部矩形(块元素)将是超链接.在这个矩形内部应该有一些文本,在本文末尾应该有另一个链接.
不幸的是,嵌套链接(A元素)在(X)HTML中是非法的：
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested;
an A element must not contain any other A elements.
(从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.更糟糕的是,一些网络浏览器在某些情况下通过将内部链接元素移动到外部链接元素的关闭元素外部来实现这一要求.这当然完全打破了布局.
所以我想问的是如何使用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>
