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结构为这样时
一些浏览器就会错误的把 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;}
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
