2012-05-06 9 views
8

次の例を示します。http://jsfiddle.net/A8v9x/4/ - 最初のリンクをクリックしてページに戻ると、最初のリンクが緑色に変わります。しかし、訪問済みのリンクがtext-decoration:underline;と宣言されていても、まだ下線はありません。 !importantをそのルールに追加しても変更はありません。訪問先リンクのアンダーライン

CSS仕様でこのような動作に関する情報を見つけることができませんでした。それは一般的なブラウザのバグですか?それを回避する方法は?

+0

大きな疑問、'ようですリンク 'は' text-decoration:none'を持っています... –

答えて

14

:visitedでテキストの装飾を変更することはできません。これは、https://developer.mozilla.org/en/CSS/Privacy_and_the_:visited_selectorで議論されているプラ​​イバシーの問題から外れています。基本的に計算されたプロパティを変更することで、Webサイトでユーザーが訪問したサイトを特定できるようになります。

visited linkのスタイルに使用できるCSSプロパティは、色、背景色、border - * - color、outline-color、およびcolumn-rule-colorです。ペイントサーバーではなく、なし)、塗りと線のプロパティ。許可されていないプロパティ(および許可されたプロパティのアルファコンポーネントの場合、rgba()またはhsla()カラーまたは透明が使用されている場合)では、未訪問のリンクのスタイルが代わりに使用されます。

+1

ありがとう、これは妥当な音です! – naivists

1

私は同じ問題を昨日持ちましたが、回避策が見つかりました。昔、私はリンクを下線付きで置いていましたが、訪問者が同じリンクを二度クリックしないようにするのは簡単でした。

私は同じことをしようとしていると昨日驚いて、働いていませんでした。 2007年以来、セキュリティ上の理由により、すべてのブラウザが「訪問した」プロパティを制限していたことがインターネット上で判明するまでに30分失った。彼らはあなたが "訪れた"に設定できる6-7のプロパティのようなものです。 そのうち1つはボーダーカラーです。下線をなしに設定すると、は "border-bottom-color"を使って下線を付けてとしました。 "border-bottom-color:transparent;"を設定することはできません。あなたは訪問したが、はボーダーカラーを親要素の背景色と同じ色に設定することができる。一度リンクが訪れたら、それは下線を見えなくするでしょう。

<style type="text/css"> 
body{color:black;background-color:white;} 
a:link{color:blue;text-decoration:none;border-bottom: 1px solid;border-bottom-color:blue;} 
a:visited{color:red;border-bottom-color:white;} 
</style> 

それとも、背景と訪問のために別の色と同じリンクのボーダーカラーを設定することにより、(あなたが求めているもの)の逆を行うことができます。逆に

デモ:underline`が、 `::hover`点`テキスト装飾を行います。visited`が何らかの理由でしない場合は `:https://jsfiddle.net/stfr9f9a

関連する問題