這是由工作中的一個小改動需求得到的這個解決方案的；那個需求是這樣的，如圖：
需求原來是球隊名字沒有點擊功能的，而藍色方框兩隊之間的比賽點擊的時候會跳轉到比賽文字直播頁面。現在需要要求點擊球隊名字要跳轉到球隊資料庫頁面。
這樣就會產生了a標簽的嵌套。
但是總所周知a標簽是內聯元素(inline element)，如果嵌套a標簽的話瀏覽器則會解析成:
1 <!-- a標簽進行嵌套的時候 --> 2 <a href="#outer">outerA 3 <a href="#inner">innerA</a> 4 </a> 5 6 <!-- 而瀏覽器則會解析成 -- > 7 <a href="#outer">outerA</a> 8 <a href="#inner">innerA</a>
這樣的話就不符合需求了。
這里介紹的解決方案有兩種：
1.使用object標簽進行嵌套
<a href="#outer"> outerA <object><a href="#inner">innerA</a></object> </a>
這樣頁面就會解析成:
這樣在內層a標簽加一層object標簽嵌套，可以解決了a標簽嵌套的問題了。這個辦法在火狐和谷歌、IE9及以上是沒問題的。但是IE8及以下就會有問題，因為IE8不支持object標簽，它會將object解析成一個對象a標簽的內容顯示不出來。所以就有了下面的第二種方案。
2.將外層a標簽改為行內塊級元素即display:inline-block;設置height/width並設置為絕對定位將其放在里層a標簽的位置，通過調整里層a標簽及外層a的z-index大小，使得鼠標能正確選中a標簽；
由於產品要求兼容到IE8，所以公司目前使用的是這種方案：
這樣通過改變外層a標簽的display並調整position及z-index也可以達到a標簽嵌套的效果，注意這里說的是效果而不是具體的解析就是嵌套的。
更多情況下推薦第一種方式，這樣瀏覽器解析的會更好。
如果有更好的解決方案，歡迎大家一起交流學習。謝謝~