前端页面a标签嵌套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>

这样就解析成：

2.将外层a标签改为行内块级元素即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置，通过调整里层a标签及外层a的z-index大小，使得鼠标能正确选中a标签；