0

以下の例のように、CSS を使用してリンクのスタイルを設定しました。

これはChromeでは期待どおりに機能していますが、IE8ではこの問題が発生しています:

最初にページにアクセスしたとき、すべてのリンクに期待どおりの下線がありません。

それらにカーソルを合わせると、期待どおりに下線が引かれます。

その後、リンクにアクセスすると、期待どおりに下線が消えますが、もう一度それらにカーソルを合わせると、下線が表示されなくなります。

何か案は...？

ありがとう

a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}     
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}  
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
4

3 に答える 3

1

さまざまなセレクターを正しい順序でリストするようにしてください。

a:hover後a:linkに来a:visited a:activeなければならず、後に来なければならないa:hover

また、使用しないでください!important。これにより、後で問題が発生する可能性があります。

ソース: http://www.w3schools.com/css/css_link.asp

于 2013-10-02T13:44:52.363 に答える
1

あなたの問題は、リンクがLVHA オーダーでスタイルされていないという事実に起因しています。クロスブラウザーで一貫した結果を得るには、:link最初に 、次に:visited、次に:hoverでスタイルを設定する必要があります。:active

さらに、別の値でオーバーライドする場合を除き、 、、またはに適用されたスタイルを:link再適用する必要はありません。たとえば、forを宣言する場合、それを にオーバーライドする場合を除いて、他の定義に入れる必要はありません。を除くすべてのスタイルは同じであるため、ここで LVHA の順序をバイパスできます。:visited:hover:activetext-decoration:none:link:hovernone:hover

a:link, a:visited, a:active {
    color: #0064cc;
    font-family: Arial;
    font-size: 13px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

お役に立てれば！

編集

問題は の使用とは関係ありませんが!important、一般的には使用を避けることをお勧めします。それはかなり非セマンティックな CSS につながります。CSS セレクターが適用される順序を包括的に理解しておくことをお勧めします (思ったほど単純ではありません!)。詳細については、MDN のドキュメントを参照してください。

于 2013-10-02T13:44:14.167 に答える
1

CSS セレクターの特異性について読んで、スタイル ルールを並べ替えてください。

http://www.w3.org/TR/css3-selectors/#specificity

そして!important、悪魔が十字架を避けるように、避けるようにしてください。

于 2013-10-02T13:46:19.453 に答える