优化网页链接结构a标签嵌套a标签的问题以及解决方案

最近收到不少网友反馈想要在摘要里假如文章页的链接，第一印象就是很简单啊，加上a标签就好了是不，看起来很简单，实际操作起来更简单，为什么这么说呢，哈~我的模板一般都是摘要列表部分都是显示作用，部分主题集成在a标签之内，后来不知道怎么了，好多主题都没有添加a标签了，但是想要假如却出现了两个a标签，这就可能导致新添加的要么无效，要么样式错乱，比如这个：

优化网页链接结构a标签嵌套a标签的问题以及解决方案 第1张

下面是html里面的代码

<a href="https://www.liblog.cn/">
    <div class="list">
        <img src="img/index-lb1.jpg" alt="img">
        <a href="/">查看详情</a>
    </div>
</a>

那么它在浏览器中会解析结果如下：

<a href="https://www.liblog.cn/"></a>
<div class="list">
    <a href="https://www.liblog.cn/">
        <img src="img/index-lb1.jpg" alt="img">
    </a>
<a href="/">查看详情</a>
</div>

看懂了啵~也就是说：a标签嵌套a标签内，浏览器会自动添加结束符号，而HTML的嵌套规范里就有一条：a标签不能嵌套a。

解决方案

1、若非必须，换个其他的标签（简单粗暴~）

2、不能接受换标签，可以使用【object】标签进行嵌套

把作为子元素的a标签放在object标签里面，这样浏览器解析的与HTML里面编辑的是一样的。

<a href="https://www.liblog.cn/">
    <div class="list">
        <img src="img/index-lb1.jpg" alt="img">
        <object><a href="/">查看详情</a></object>
    </div>
</a>

浏览器解析结果正常了，还可以将外层a标签改为行内块级元素，即【display:inline-block;】设置【height/width】并设置为绝对定位将其放在里层a标签的位置，通过调整里层a标签及外层a的【z-index】大小，使得鼠标能正确选中a标签；其实这样浏览器解析的与HTML编辑还是不一样，只是达到了想要的效果。所以说这种办法是最麻烦的，最不建议采用的。当然这个方法我也仅仅转载过来，毕竟太麻烦啦，折腾浪费的时间跟结果不成正比，不值得浪费更多的时间。