星空网 > 软件开发 > 网页设计

部分浏览器上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 { 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;}

 






原标题:部分浏览器上a标签包裹的dom元素显示不正常

关键词:浏览器

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2023年假日季美国玩具品类购物趋势:https://www.kjdsnews.com/a/1668536.html
框架柜(FLAT RACK):https://www.kjdsnews.com/a/1668537.html
重磅更新!亚马逊评分规则再添四项重点:https://www.kjdsnews.com/a/1668538.html
TikTok Shop美国站“TushBaby臀带”日售5500单,两周卖出140万美金 | 嘀嗒狗:https://www.kjdsnews.com/a/1668539.html
Keith律所代理连发三起版权案件!这二十多款图案未经许可请勿商用!:https://www.kjdsnews.com/a/1668540.html
eBay调整SpeedPAK相关路向运费:https://www.kjdsnews.com/a/1668541.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流