这是由工作中的一个小改动需求得到的这个解决方案的;那个需求是这样的,如图:

需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面。现在需要要求点击球队名字要跳转到球队资料库页面。

这样就会产生了a标签的嵌套。

但是总所周知a标签是内联元素(inline element),如果嵌套a标签的话浏览器则会解析成:

 <!-- a标签进行嵌套的时候 -->
<a href="#outer">outerA
<a href="#inner">innerA</a>
</a> <!-- 而浏览器则会解析成 -- >
<a href="#outer">outerA</a>
<a href="#inner">innerA</a>

这样的话就不符合需求了。

这里介绍的解决方案有两种:

1.使用object标签进行嵌套

<a href="#outer">
outerA
<object><a href="#inner">innerA</a></object>
</a>

这样页面就会解析成:

这样在内层a标签加一层object标签嵌套,可以解决了a标签嵌套的问题了。这个办法在火狐和谷歌、IE9及以上是没问题的。但是IE8及以下就会有问题,因为IE8不支持object标签,它会将object解析成一个对象a标签的内容显示不出来。所以就有了下面的第二种方案。

2.将外层a标签改为行内块级元素即display:inline-block;设置height/width并设置为绝对定位将其放在里层a标签的位置,通过调整里层a标签及外层a的z-index大小,使得鼠标能正确选中a标签;

由于产品要求兼容到IE8,所以公司目前使用的是这种方案:

这样通过改变外层a标签的display并调整position及z-index也可以达到a标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。

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

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

前端页面a标签嵌套a标签效果的两种解决方案的更多相关文章

  1. 转:前端页面a标签嵌套a标签效果的两种解决方案

      这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...

  2. a标签嵌套a标签效果的两种解决方案

    <!-- a标签进行嵌套的时候 --> <a href="#outer">outerA <a href="#inner">i ...

  3. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  4. a标签嵌套a标签在实际项目开发中遇到的坑

    大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...

  5. 网页内容的html标签补全和过滤的两种方法

    网页内容的html标签补全和过滤的两种方法: 假设你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包括进去了,我们能够写个函数方法来补全ht ...

  6. 解决前端页面a标签嵌套a标签bug

    在前端页面中,一般二级导航栏会出现a嵌套a标签出现重复的父元素a标签bug 比如: <nav class="nav"> <ul> <li> &l ...

  7. Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  8. 内联标签------------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)

    内联标签 <em> 强调,大部分浏览器渲染为斜体. <strong> 强调,大部分浏览器渲染为黑体. <sub> 下标 <sup> 上标 内联标签通常用 ...

  9. PHP带标签的字符串去除标签,计算字符串长度的两种格式,截取字符串

    $str = "<p>看地方撒地方<i>fdsafsdfsd</i><img src="/static/img/fdsf.jpg" ...

随机推荐

  1. Parameter index out of range (1 > number of parameters, which is 0).

    数据库错误:Parameter   index   out   of   range   (1   >   number   of   parameters,   which   is   0) ...

  2. 【转】Linux字符转换命令col

    转自:http://www.cnblogs.com/ningvsban/p/3725464.html [root@www ~]# col [-xb]选项与参数:-x :将 tab 键转换成对等的空格键 ...

  3. (转)Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

  4. Android 检查手机上是否安装了指定的软件(根据包名检测)

    Android检查手机上是否安装了指定的软件(根据包名检测) /** * 检查手机上是否安装了指定的软件 * @param context * @param packageName * @return ...

  5. Android studio如何显示代码行数

    1.首先打开as:File-->Settings... 2.Editor-->General-->Appearence 3.右边show line numbers 4.依次点击app ...

  6. 00-SQLite的SQL语法

    SQLite的SQL语法 SQLite库可以解析大部分标准SQL语言.但它也省去了一些特性并且加入了一些自己的新特性.这篇文档就是试图描述那些SQLite支持/不支持的SQL语法的.查看关键字列表. ...

  7. db2 jdbc连接字符串中 指定currentSchema

    场景:连接DB2数据库的,jdbc的连接字符串中没有给当前的数据源用户指定默认的schema,而当前的数据源用户下可能有多个schema,则会使用数据源用户默认的schema. 例如:admin用户的 ...

  8. Oracle、Db2、SqlServer、MySQL 数据库插入当前系统时间

    做易买网项目,由于对数据库插入系统时间不了解,常常遇到的问题: 1.java.sql.SQLException: ORA-01861: 文字与格式字符串不匹配.原因:由于获取系统时间类型不对,应为sy ...

  9. Centos6.4 安装bind dns 服务器

    一.介绍 1)Centos6.4 64bit minimal 2) bind-9.8.2-0.30.rc1.el6_6.3.x86_64 二.安装 $ yum install -y bind bind ...

  10. (转) SolrCloud之分布式索引及与Zookeeper的集成

    http://blog.csdn.net/ebay/article/details/46549481 作者:Wang, Josh 一.概述 Lucene是一个Java语言编写的利用倒排原理实现的文本检 ...