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

2023-12-22 16:01:58 浏览数 (2)

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

下面是html里面的代码

代码语言:javascript复制
<a href="https://www.liblog.cn/">
    <div class="list">
        <img src="img/index-lb1.jpg" alt="img">
        <a href="/">查看详情</a>
    </div>
</a>

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

代码语言:javascript复制
<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里面编辑的是一样的。

代码语言:javascript复制
<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编辑还是不一样,只是达到了想要的效果。所以说这种办法是最麻烦的,最不建议采用的。当然这个方法我也仅仅转载过来,毕竟太麻烦啦,折腾浪费的时间跟结果不成正比,不值得浪费更多的时间。

0 人点赞