【实测】两个超链接a标签嵌套a标签效果的两种解决方案-Discuz教程下载

【实测】两个超链接a标签嵌套a标签效果的两种解决方案

开通本站Svip会员,全站资源免费下
  1. <!-- aTAG.html" target="_blank" class="relatedlink">标签进行嵌套的时候 -->
  2. <a href="#outer">outerA
  3.     <a href="#inner">innerA</a>
  4. </a>

  5. <!-- 而浏览器则会解析成 -- >
  6. <a href="#outer">outerA</a>
  7. <a href="#inner">innerA</a>
复制代码
1.使用object标签进行嵌套
  1. <a href="#outer">
  2.     outerA
  3.     <object><a href="#inner">innerA</a></object>
  4. </a>
复制代码
这样在内层a标签加一层object标签嵌套,可以解决了a标签嵌套的问题了。这个办法在火狐和谷歌、IE9及以上是没问题的。但是IE8及以下就会有问题,因为IE8不支持object标签,它会将object解析成一个对象a标签的内容显示不出来。所以就有了下面的第二种方案。

2.将外层a标签改为行内块级元素即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置,通过调整里层a标签及外层a的z-index大小,使得鼠标能正确选中a标签;
这样通过改变外层a标签的display并调整position及z-index也可以达到a标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部