部分浏览器上a标签包裹的dom元素显示不正常_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:37:20
原创
1493人浏览过

在苹果和部分安卓机上出现,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 { border: 0;    height: 1px;    color: $spilt_line;    width: 100%;}

当我遇到这个问题时我还尝试其它好几种解决方案或者组合并用或者排除,但都没有效果(不能解决),
比如我这样

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(0,0,0,0);//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;}iea:visited {    color: #800080;}
登录后复制

 



HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号