部分浏览器上a标签包裹的dom元素显示不正常
在苹果和部分安卓机上出现,pc端和chrome浏览器响应式设计里怎么样也不会出现的
访问后a标签包裹的dom元素显示不正常
a标签内的hr元素颜色显示不正常
hr水平线的颜色被 bootstrap的css的
a { color: #428bca; text-decoration: none;} <br>a:hover,a:focus { color: #2a6496; text-decoration: underline;} |
或者被user agent stylesheet
1 2 | a:-webkit-any-link { color: -webkit-link; } a:-webkit-any-link:active{ color: -webkit-activelink} |
重写覆盖
出现的原因是因为hr的css采用了
1 2 3 4 5 6 | 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: 100%;}
当我遇到这个问题时我还尝试其它好几种解决方案或者组合并用或者排除,但都没有效果(不能解决),
比如我这样
1 | a{position:relative; z-index:-5;} hr{ position:relative; z-index:10;} |
或者这样
1 | hr{border-top: 1px solid #xxx !important;} |
或者
1 2 3 4 5 6 7 8 9 10 | 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 不同浏览器有自己的默认样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步