发现问题
最近有一个需求,需要在一个a标签中嵌套另一个a标签,以此跳转不同的链接,行嘛,写嘛。
<a href="javascript:void(0);">
大
<a href="javascript:void(0);">小</a>
</a>
写完了。。。
???么得嵌套关系,是我写错了,还是浏览器解析有问题?
随即发挥cv工程师的特长,面向搜索引擎编程。
发现a标签是不能相互嵌套的。更多HTML嵌套详情请点击链接
咋办?咋整?
有两个解决方案:
<a href="javascript:void(0);">大
<object>
<a href="javascript:void(0);">小</a>
</object>
</a>
就是这样,浏览器会解析成 ↓
这样就实现了a标签的嵌套。。。这个方法在一般浏览器上都么得问题(除了IE8)…
-
设置两个a标签的display和z-index
父的a标签的设置display:block
或者display:inline-block
,并且设置宽高以及position:absolute
,再调整父子a标签的z-index
,以此来达到效果,但是浏览器解析还不是嵌套关系,哎,效果有了就好了。