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

ie
a:visited {
    color: #800080;
}