<!-- 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标签;

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

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

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

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

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

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

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

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

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

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

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

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

  6. javascript文件夹选择框的两种解决方案

    javascript文件夹选择框的两种解决方案 解决方案1:调用windows 的shell,但会有安全问题. * browseFolder.js * 该文件定义了BrowseFolder()函数,它 ...

  7. PHP中实现MySQL嵌套事务的两种解决方案

    PHP中实现MySQL嵌套事务的两种解决方案 一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: Transactions cannot be nested. This is a co ...

  8. Android 的保活的两种解决方案

    原文链接:http://blog.csdn.net/pan861190079/article/details/72773549 详细的阐述了 Android 的保活的两种解决方案 —— 由panhao ...

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

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

随机推荐

  1. linux切割文件【split命令详解】

    linux查看帮助 [tomcat-nohup]$ split --help 用法:split [选项]... [输入 [前缀]] 将输入内容拆分为固定大小的分片并输出到"前缀aa" ...

  2. hbase-0.98.1-cdh5.1.0 完全分布式搭建

    cdh版与0.98版的配置一样 1.环境 master:c1 slave:c2,c3 CentOS 6.5 x64 ,hadoop-2.3.0-cdh5.1.0,zookeeper-3.4.5-cdh ...

  3. hdu1061

    #include <iostream>#include <cstdio>using namespace std;int mod_exp(int a, int b, int c) ...

  4. 【Qt官方例程学习笔记】Application Example(构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数)

    The Application example shows how to implement a standard GUI application with menus, toolbars, and ...

  5. 使用JSP输出九九乘法表

    在html网页中编写Java代码是,需要使用<%%>来编写,<%=%>表示取等号后面的值,如<%="hello"%>就会输出hello. < ...

  6. spring framework 源码

    spring framework 各版本源码下载地址 现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-pro ...

  7. jquery抽奖插件+概率计算

    写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~. demo lottery.jquery.js $.fn.ex ...

  8. kali linux学习笔记之系统定制及优化(附:中文输入法设置)

    fix update flash plugin on kali rolling author:@kerker 0x00设置软件源 root@kali:~# vim /etc/apt/sources.l ...

  9. InnoDB信息说明

    InnoDB是MySQL数据库发展至今一款至关重要的数据库存储引擎,其不仅支持事务特性,并且具有丰富的统计信息,便于数据库管理人员了解最近InnoDB存储引擎的运行状态. 早期版本的InnoDB存储引 ...

  10. vue -- 正确的引入jquery

    虽然vue中尽量不要使用jquery,但有时因为业务需求也不得不引入. 下载依赖 npm i jquery --save 全局配置的方法: 在webpack.base.conf.js里加入: var ...