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…