部分浏览器上a标签包裹的dom元素显示不正常
在苹果和部分安卓机上出现,pc端和chrome浏览器响应式设计里怎么样也不会出现的
访问后a标签包裹的dom元素显示不正常
a标签内的hr元素颜色显示不正常
hr水平线的颜色被 bootstrap的css的
a { color: #428bca; text-decoration: none;}
a:hover,a:focus { color: #2a6496; text-decoration: underline;}
或者被user agent stylesheet
a:-webkit-any-link { color: -webkit-link; }
a:-webkit-any-link:active{ color: -webkit-activelink}
重写覆盖
出现的原因是因为hr的css采用了
border-top: 1px solid #xxxxx;之类的写法,设置了hr的border-color为xxx
此时的dom结构为这样时
<a>
<div></div>
<hr>
</a>
一些浏览器就会错误的把 hr的border-color由a的color覆盖渲染
解决办法是把hr设置css { height: 1px; color: $spilt_line; width: %;}
当我遇到这个问题时我还尝试其它好几种解决方案或者组合并用或者排除,但都没有效果(不能解决),
比如我这样
a{position:relative; z-index:-5;} hr{ position:relative; z-index:10;}
或者这样
hr{border-top: 1px solid #xxx !important;}
或者
a{ color:transparent;
&:link { @extend a}
&:visited {@extend a}
&:hover {@extend a}
&:active {@extend a}
}
a:-webkit-any-link{ color: transparent;}
a:-webkit-any-link:visited{ color: transparent;}
a:-webkit-any-link:active{ color: transparent;}
or a {color:rgba(0,0,0,0)}
以及怀疑过并设置
-webkit-tap-highlight-color:rgba(,,,);//webkit内核的手机浏览器点击高亮颜色
甚至删除掉所有关于 a color相关的类,但是没有用,会被user agent 自己加上
关于a 不同浏览器有自己的默认样式
webkit浏览器默认样式
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
} a:-webkit-any-link:active {
color: -webkit-activelink
} mozilla
*|*:-moz-any-link {
cursor: pointer;
} *|*:-moz-any-link:-moz-focusring {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
} /*opera的默认样式*/
a {
color: #00C;
text-decoration: underline;
} ie
a:visited {
color: #800080;
}
部分浏览器上a标签包裹的dom元素显示不正常的更多相关文章
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- 为什么HTML中的多个空格或是回车在浏览器上只能显示出一个?
我们在学习HTML的时候可能书本或是老师会告诉我们一件事,就是在HTML中不管我们在两个文本之间加上多少连续的空格或是回车,到了浏览器里面只能显示出一个来.但是我们从来不知道为什么. 原因很简单,因为 ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- input标签type为number时,输入小数,在Firefox浏览器上输入框标红的问题
问题一:firefox 下 默认情况 <input type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...
- HTML5部分新标签属性及DOM扩展元素
HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...
- 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...
随机推荐
- dts--tests(二)
rxtx_callbacks.py """ DPDK Test suite. Test Rxtx_Callbacks. """ import ...
- 用ajax获取淘宝关键字接口
可定需要查看淘宝界面的结构,按F12查看网页,此时先清除一下网页中的数据,让Network制空,随后在输入框中输入新的内容,比如钱包,数据中会出现新的数据.点击及查看蓝色方框中的内容 点击之后,你可以 ...
- gcc常用语法
1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. g ...
- 基于pandas进行数据预处理
很久没用pandas,有些有点忘了,转载一个比较完整的利用pandas进行数据预处理的博文:https://blog.csdn.net/u014400239/article/details/70846 ...
- 笔记-docker-3 使用
笔记-docker-3 使用 1. 镜像 image是docker最重要的概念,docker运行容器前需要本地存在对应的镜像,如果没有,会尝试从默认镜像库下载. 1.1. 镜像获取 查 ...
- 笔记-scrapy-去重
笔记-scrapy-去重 1. scrapy 去重 scrapy 版本:1.5.0 第一步是要找到去重的代码,scrapy在请求入列前去重,具体源码在scheduler.py: def en ...
- sparkStreaming统计各平台最近一分钟实时注册收入 时间段,平台,金额,订单数
样例数据: __clientip=10.10.9.153&paymentstatus=0&__opip=&memberid=89385239&iamount=1& ...
- TouTiao开源项目 分析笔记8 图解分析数据加载方式
1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有: IBaseView<T>==>定义了5个方法. 然后最基础 ...
- ansible-2
软件相关模块 rpm 和yum 的区别: rpm: redhat package manager :yum可以解决依赖关系 yum 源配置: cat /etc/yum.repos.d/epel.rep ...
- Google Chrome 自定义协议(PROTOCOL)问题的处理
最近在使用谷歌浏览器的时候遇到了自定义协议(PROTOCOL)的问题,比较折腾,特此记录,希望我浪费生命换来的结果能够帮助读到此文的朋友少浪费一点宝贵的时间! 由于某些原因,电脑里一直没有安装阿里旺旺 ...