a標簽嵌套a標簽效果的兩種解決方案

<!-- a標簽進行嵌套的時候 -->
<a href="#outer">outerA
    <a href="#inner">innerA</a>
</a>

<!-- 而瀏覽器則會解析成 -- >
<a href="#outer">outerA</a>
<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標簽；

這樣通過改變外層a標簽的display並調整position及z-index也可以達到a標簽嵌套的效果，注意這里說的是效果而不是具體的解析就是嵌套的。