部分瀏覽器上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;
}