a标签不能包裹div了？！你可能犯了这个错

a标签不能包裹div了？！你可能犯了这个错

做者：吴业飞
时间：2019年1月8日

---

背景

本文记录了一次发现bug解决bug的过程。

需求

要求在整个全屏banner都能点击跳转页面，而不是点击banner上的按钮才跳转

问题

一拿到这个需求不觉得然，由于太常规了，可是后面发生的事让我百思不得其解。个人代码结构原来大概是这样的

<div class="banner">
    <!-- some code here -->
    <a href="#">go to some where</a>
</div>
复制代码

如今要整个banner都能点击嘛，那外层包个a标签不就好了，因而我这样写

<a href="#">
    <div class="section">
        <!-- some code here -->
        <a href="#">go to some where</a>
    </div>
</a>
复制代码

很正常对不对，然而页面上渲染成了这样

<a href="#"></a>
<div class="banner">
	<a href="#">
    	<!-- some code here -->
    </a>
	<a href="#">go to some where</a>
</div>
复制代码

这是什么鬼，我明明只写了一个a准备包裹banner,为何自动生成了两个，还没包裹成功。而后我发现这个banner是position: absolute;的，我以为我可能找到问题所在了，a标签不能包裹定位元素！因而我作了个实验

<a href="#">
    <div style="position: absolute;">test</div>
</a>  
复制代码

结果渲染结果符合预期

<a href="#">
    <div style="position: absolute;">test</div>
</a>  
复制代码

这下怎么办，究竟是什么缘由致使的渲染异常。此时个人心情就像看到1 + 1 不等于2同样，看起来多么简单多么正常的一个问题结果却不符合你的预期。我站起身，仰望45度的天空，思考片刻，想起了个人C语言启蒙老师的一句话“不要质疑编译器，它报错必定是你的错”，我静下心来默默打开了W3C的官网，我去直接查规范！看着W3C那几乎纯文字的排版，密密麻麻，强忍着找到了a标签的相关说明，有这么一句话

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).

翻译过来就是

只要在其中没有交互式内容（例如，按钮或其余连接），a元素能够围绕整个段落，列表，表格等，甚至整个部分。

这个说的不就是我么！个人结构是

<a href="#">
    <div class="banner">
		some code here
        <a href="#">go to some where</a>
    </div>
</a>  
复制代码

banner里有个连接！规范里说了，连接里不能套连接！ 接着把内部连接删掉后，一切正常了。

后记

这个知识点应该在最先学习的时候学到过，可是平时工做中真的不多碰到这个连接里套连接的问题，因此也就遗忘了，在问题出现的时候没有一眼看出问题所在，老话说的好，温故而知新，谨记！

参考文献

【1】《HTML 5.2 W3C Recommendation, 14 December 2017》，www.w3.org/TR/html52/t…