一部のブラウザでは a タグで囲まれた dom 要素が正しく表示されない_html/css

一部のブラウザでは a タグで囲まれた dom 要素が正しく表示されない_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:37:20

オリジナル

1427 人が閲覧しました

Apple および一部の Android デバイスでは表示されますが、PC および Chrome ブラウザーではレスポンシブデザインに関係なく表示されません
アクセス後、a タグで囲まれた dom 要素が正しく表示されません
hr 要素の色が正しく表示されません。通常、hr の横線の色はブートストラップ CSS

a {  color: #428bca;  text-decoration: none;} a:hover,a:focus {  color: #2a6496;  text-decoration: underline;}

ログイン後にコピー

またはユーザーエージェントスタイルシート

a:-webkit-any-link {  color: -webkit-link; }a:-webkit-any-link:active{ color: -webkit-activelink}

ログイン後にコピー

rewrite

を採用しているためです。

一部のブラウザでは、誤って hr の境界線の色が a の色で上書きされてしまいます。解決策は、css { border: 0; height: 1px color: $spilt_line width; に設定することです。 : 100%;}

この問題に遭遇したとき、他のいくつかの解決策、組み合わせ、または除外も試しましたが、どれも機能しませんでした（解決できません）。
たとえば、私はこんな感じです

border-top: 1px solid #xxxxx;之类的写法,设置了hr的border-color为xxx此时的dom结构为这样时<a>    <div></div>    <hr></a>

ログイン後にコピー

または this

a{position:relative; z-index:-5;} hr{ position:relative; z-index:10;}

ログイン後にコピー

hr{border-top: 1px solid #xxx !important;}

ログイン後にコピー

そして私はそれを疑って設定しました

-webkit-tap-highlight-color:rgba(0,0,0,0);// Webkit のハイライト色をクリックします-ベースのモバイルブラウザ

色関連のクラスをすべて削除しても、それは役に立たず、ユーザーエージェント自身によって追加されます

概要異なるブラウザには独自のデフォルトスタイルがあります

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)}

ログイン後にコピー