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

概述我想要有一些看起来和表现为超链接在更大的矩形(全页宽),也是超链接的东西.下面有ASCII艺术表现形式： |-------------------------------------------|| Some text [_link_] ||-------------------------------------------| 整个 我想要有一些看起来和表现为超链接在更大的矩形(全页宽),也是超链接的东西.下面有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" >  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>...

@R_404_6120@ 你可以尝试这样的东西：

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 >  foo  <a href="bar" >bar</a>  <a href="foo" ><span>baz</span></a></div>

总结

以上是内存溢出为你收集整理的在HTML源中没有嵌套链接元素的嵌套超链接区域全部内容，希望文章能够帮你解决在HTML源中没有嵌套链接元素的嵌套超链接区域所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。