• 注册
  • 前端后端 前端后端 关注:336 内容:46

    a标签嵌套a标签时,游览器解析错误的两种解决方案

  • 查看作者
  • 打赏作者
    • 年SVIP2
      靓号:9999
      宇宙最帅

      问题前言

      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标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。

      使用说明

      更多情况下推荐第一种方式,这样浏览器解析的会更好。

      如果有更好的解决方案,欢迎大家一起交流学习。谢谢~

      请根据自己实际情况做相应修改

      请登录之后再进行评论

      登录
    • 发布
    • 做任务
    • 实时动态
    • 偏好设置
    • 帖子间隔 侧栏位置: