转:前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的;那个需求是这样的,如图:
需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面。现在需要要求点击球队名字要跳转到球队资料库页面。
这样就会产生了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标签嵌套的效果,注意这里说的是效果而不是具体的解析就是嵌套的。
更多情况下推荐第一种方式,这样浏览器解析的会更好。
如果有更好的解决方案,欢迎大家一起交流学习。谢谢~
原文:https://www.cnblogs.com/leungUwah/p/6234832.html
转:前端页面a标签嵌套a标签效果的两种解决方案的更多相关文章
- 前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...
- a标签嵌套a标签效果的两种解决方案
<!-- a标签进行嵌套的时候 --> <a href="#outer">outerA <a href="#inner">i ...
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- a标签嵌套a标签在实际项目开发中遇到的坑
大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素. 其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签 ...
- 网页内容的html标签补全和过滤的两种方法
网页内容的html标签补全和过滤的两种方法: 假设你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包括进去了,我们能够写个函数方法来补全ht ...
- 解决前端页面a标签嵌套a标签bug
在前端页面中,一般二级导航栏会出现a嵌套a标签出现重复的父元素a标签bug 比如: <nav class="nav"> <ul> <li> &l ...
- 内联标签------------大多数XHTML可以表示为两种类型的标签:块标签(block tag)和内联标签(inline tag)
内联标签 <em> 强调,大部分浏览器渲染为斜体. <strong> 强调,大部分浏览器渲染为黑体. <sub> 下标 <sup> 上标 内联标签通常用 ...
- PHP带标签的字符串去除标签,计算字符串长度的两种格式,截取字符串
$str = "<p>看地方撒地方<i>fdsafsdfsd</i><img src="/static/img/fdsf.jpg" ...
- img标签在div中水平垂直居中--两种实现方式
第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...
随机推荐
- yolov2-tiny-voc.cfg 参数解析
一.参数解析 [net] batch=64 # number of images pushed with a forward pass through the network subdivisions ...
- Hi3519v101-uboot-start.S分析
00032: #include <config.h>00033: #include <version.h> 1)#include <config.h>.config ...
- epoll讲解--转自知乎
Ctrip AIO底层使用epoll https://blog.csdn.net/z69183787/article/details/52943637 首先我们来定义流的概念,一个流可以是文件,soc ...
- [iOS]App上架流程[利用Archive进行上传]
今天给大家带来项目如何上架的教程 准备: 1. 一个开发者账号(需要交过钱的,
- WebAPI跨域处理
原文来自:http://www.cnblogs.com/heifengwll/p/6243374.html WebApi2跨域问题 一.跨域问题产生的原因:同源策略(Same origin pol ...
- Bleve代码阅读(一)——新建索引
引言 Bleve是Golang实现的一个全文检索库,类似Lucene之于Java.在这里通过阅读其代码,来学习如何使用及定制检索功能.也是为了通过阅读代码,学习在具体环境下Golang的一些使用方式. ...
- Listbox的操作,数据源变化时要及时更新listbox要先把数据源置空,在给数据源绑定数据
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Linux之Ubuntu安装Sublime
0.控制台下开启并使用: 为什么先说这一步呢?确实很尴尬,对不对.但确实,当初就是安装好了都不知道咋个用,就是这么蠢...hahahahahahahha 命令行:subl 注意:不是sub,也不是su ...
- 7、完整版的strcpy函数
char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) && (strSrc != ...
- mysql 案例 ~ 分析执行完的大事务
一 简介:今天咱们来聊聊如何定位以及执行完的大事务 二 目的:通过分析binlog脚本来定位执行的大事务 三 分析脚本 mysqlbinlog --base64-output=decode-rows ...