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

李洋博客 2023-12-21 2.13 K阅读 0评论

温馨提示:这篇文章已超过71天没有更新,请注意相关的内容是否还可用!

最近收到不少网友反馈想要在摘要里假如文章页的链接,第一印象就是很简单啊,加上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编辑还是不一样,只是达到了想要的效果。所以说这种办法是最麻烦的,最不建议采用的。当然这个方法我也仅仅转载过来,毕竟太麻烦啦,折腾浪费的时间跟结果不成正比,不值得浪费更多的时间。

好了,本文为CSDN博主「茶憶」的原创文章,感谢大佬指教,在此谢过,有问题留言反馈吧,我去给主题添加a标签了。

文章版权声明:除非注明,否则均为老李笔记原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,2128人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码