问题前言
a标签里面嵌套a标签的时候,游览器会解析错误(开闭标签配对错误)
众所周知a标签是内联元素(inline element),如果嵌套a标签的话浏览器则会解析成
<!-- a标签进行嵌套的时候 --> <a href="#url1"> neirong1 <a href="#url2">neirong2</a> </a> <!-- 而浏览器则会解析成 --> <a href="#url1">neirong1</a> <a href="#url2">neirong2</a>
解决方案
1. 使用 <object> 标签进行嵌套
<a href="#url1"> neirong1 <object><a href="#url2">neirong2</a></object> </a>
这样在内层a标签加一层object标签嵌套,可以解决了a标签嵌套的问题了。
这个办法在火狐和谷歌、IE9及以上是没问题的。
但是IE8及以下就会有问题,因为IE8以下不支持object标签,它会将object解析成一个对象a标签的内容显示不出来,所以就有了下面的第二种方案。
2. 将外层a标签改为行内块元素 display:inlie-block;
设置height/width并设置为绝对定位将其放在里层a标签的位置,通过调整里层a标签及外层a的z-index大小,使得鼠标能正确选中a标签
这样通过改变外层a标签的display并调整position及z-index也可以达到a标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。
使用说明
更多情况下推荐第一种方式,这样浏览器解析的会更好。
如果有更好的解决方案,欢迎大家一起交流学习。谢谢~
请根据自己实际情况做相应修改