HTML源代码中没有嵌套链接元素的嵌套超链接区域 [英] Nested hyperlinked areas without nested link elements in HTML source

问题描述

我希望有一些外观和行为像超链接在更大的矩形内（整页宽），这也是超链接。下面是它应该看起来像ASCII的艺术表达：

 
 | ------------- ------------------------------ | 
 |一些文字[_link_] | 
 | ------------------------------------------- | 
 

整个外部矩形（块元素）是超链接。

不幸的是，嵌套链接（A元素）在（X）中是非法的，因此在这个矩形中应该有一些文本，并且在本文末尾应该有另一个链接。 HTML：

12.2.2嵌套链接不合法

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

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

 < a href =xxxstyle = display：block> 
某些文字
< a href =yyy>连结< / a> 
< / a> 
  

不是有效的HTML。更糟糕的是，某些浏览器在某些情况下通过将内部链接元素移动到外部链接元素的关闭元素之外来强制执行此要求。这当然完全破坏了布局。

因此，我想问的是如何使用HTML和CSS实现上面呈现的布局但没有JavaScript），但在HTML源代码中没有嵌套链接元素 。如果行为尽可能接近具有嵌套链接元素的浏览器（对于实现HTML标准的浏览器不太严格），那将会很好。

---

编辑（16-01-2009）

澄清：超过两个链接元素是完全可以接受的

 < a href =xxx...>一些文字< / a> ; 
< a href =yyy...>连结< / a> 
< a href =xxx...&& NBSP;< / A> 
 ... 
  

解决方案

像这样：
$ b

div.a {position：relative;背景颜色：＃F88; z-index：0;} a.b {position：relative; z-index：2;} a.b：hover {background-color：＃8F8;} a.c {position：absolute; top：0;左：0;宽度：100％;身高：100％; z-index：1;} ac：hover {background-color：＃88F;} ac span {display：none;}

 < div class =a> foo< a href =barclass =b> bar< / a> < a href =fooclass =c>< span> baz< / span>< / a>< / div>< / code& div> 

I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it should look like:

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

The whole outer rectangle (block element) is to be hyperlink. Inside this rectangle there should be some text, and at the end of this text there should be another link.

Unfortunately nesting links (A elements) is illegal in (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.

(from http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), so the most natural way of implementing above

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

is not valid HTML. What is even worse is that some web browsers in some cases enforce this requirement by moving inner link element just outside closing element of outer link element. This of course utterly breaks layout.

So what I'd like to ask is how to arrive at layout presented above using HTML and CSS (but no JavaScript), but without nested link elements in HTML source. It would be nice if behaviour was as close as possible to the one with nested link elements (for browsers which are not overly strict in implementing HTML standard).

---

Edit (16-01-2009)

Clarification: Solutions which use more than two link elements are perfectly acceptable

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

解决方案

You could try something like this:

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>

这篇关于HTML源代码中没有嵌套链接元素的嵌套超链接区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！