Question

我想将一个缩略图元素包装到一个锚标记中，以便整个元素是一个可点击的链接。据我所知，我的标记看起来是正确的，但是当我在浏览器中查看页面并检查元素时，会添加几个标记。

我的标记：

<div class="col-xs-6 col-sm-4">
 <a class="link" href="page.html">
  <div class="thumbnail">
   <img alt="200x360" src="img.png">
    <div class="caption">
     <h3>Thumbnail label</h3>
 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
 <p><a href="#" class="btn btn-primary" role="button">category</a></p>
    </div>
   </div>
  </a>
 </div>

我在元素检查器中看到的内容：

<div class="col-xs-6 col-sm-4">
<a class="link" href="page.html"></a>

    <div class="thumbnail"> <a class="link" href="page.html">
            <img alt="200x360" src="img.png">
        </a>

        <div class="caption"><a class="link" href="page.html">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </a>

            <p><a class="link" href="page.html"></a><a href="#" class="btn btn-primary" role="button">category</a>
            </p>
        </div>
    </div>
</div>

我一直盯着我的标记20分钟，并通过验证器推了推。我没有看到任何错误。有人知道这里会发生什么吗？

Answer 1

问题是您在另一个<a>元素中有一个<a>元素。这是不允许的。浏览器通过在其他链接目标内容周围添加更多<a>元素来进行补偿。

12.2.2嵌套链接是非法的

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

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

如果你通过html5验证器运行它，它会这样说：

http://html5.validator.nu/

错误：看到了一个开始标记但是同一类型的元素已经打开。

从第14行第5栏;到第14行，第54栏

.</p>↩ <p><a href="#" class="btn btn-primary" role="button">catego

添加多余<a> tags <divs>?</divs></a>的HTML标记

1 个答案: