<a> link outside doesn&#39;t wrap element when it&#39;s another link inside</a>

Question

我在<a>之外创建了一个<div>链接来包装整个元素并赋予它display: block属性，但当我在<div>另一个<a>内部时链接包裹外部链接<div>内的一些文本变为height: 0。

是否可以将一个链接组合在另一个链接中？

我制作了jsfiddle示例以显示我想要实现的内容，因此如果没有内部链接，整个红色矩形将被包装为链接，但是当我添加内部链接时，仍然没有链接包装矩形。

JSFiddle示例 - http://jsfiddle.net/ynbc2d6f/2/

Answer 1

不，你不能嵌套链接。接下来会发生的事情是浏览器通过关闭元素来补偿无效的HTML以使其有效，所以你的原始文件是：

<a class = "big-link" href = "http://www.google.com">    
    <div class = "big">
        <a class = "small-link" href = "http://www.facebook.com">One</a>
    </div>
</a>

变为：

<a class="big-link" href="http://www.google.com"></a>
<div class="big">
    <a class="big-link" href="http://www.google.com"></a>
    <a class="small-link" href="http://www.facebook.com">One</a>
</div>

Answer 2

您无法在可点击元素中包含可点击元素。参见：

http://www.w3.org/TR/html5/dom.html#interactive-content-0

Answer 3

根据W3C spec on HTML Links

  

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

Answer 4

建议：将外部链接更改为div块并将click事件侦听器添加到其中。

$('.big-link').on('click', function() {
  location.href = $(this).data('href')
});

.big-link {
  display: block;
  line-height: 100%;
  margin-top: 50px;
  cursor: pointer;
}
.big {
  height: 50px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-link" data-href="http://www.google.com">
  <div class="big">
    <a class="small-link" href="http://www.facebook.com">One</a>
  </div>
</div>

Vanilla JS版

document.getElementsByClassName('big-link').item(0).addEventListener('click', function(el) {
  location.href = el.dataset.href;
});

.big-link {
  display: block;
  line-height: 100%;
  margin-top: 50px;
  cursor: pointer;
}
.big {
  height: 50px;
  background-color: red;
}

<div class="big-link" data-href="http://www.google.com">
  <div class="big">
    <a class="small-link" href="http://www.facebook.com">One</a>
  </div>
</div>