a標簽偽類:visited下划線設置無效的原因及如何解決


今天第一次加入了個前端群,作為一名萌新,看到有群友提問“怎樣取消a點擊后的下划線?”,頓感這不是很簡單的問題嘛,於是搶答“a:visited{text-decoration:none;}”,誰料這是無效的!源碼(瀏覽器為chorme53.0.2785.143):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    a:visited{ text-decoration: none; }
  </style>
</head>
<body>
  <a href="https://www.baidu.com">面向編程</a>
</body>
</html>

 

后又在FF上實驗了一下也是如此,a:visited偽類文本裝飾失效是為什么呢?懷着迷茫的心情我運用面向Baidu編程技術借鑒前人經驗,發現也有很多人曾對此提出疑問,有些人說是瀏覽器緩存結果,有的說是lvha偽類層疊效果(跟這無關,我曾嚴格按照這個關系實驗仍無效)導致,最后我找到了一部分webkit關於a:visited的文字:

  WebKit is prone to an information-disclosure vulnerability. This issue occurs when Cascading Style Sheets (CSS) use the ':visited' pseudo-class. Attackers   may determine which sites a user has visited.

  NOTE: This issue was previously covered in BID 40620

      (Apple Safari Prior to 5.0 and 4.1 Multiple Security Vulnerabilities) buthas been given its own record to better document it.

  Both the next release versions of Gecko (tentatively named Firefox 3.7) and WebKit (Safari 5) will
  implement changes to the handling of the :visited pseudo-class. Google Chrome will, I suppose, also
  implement this.

  In short, those browsers will limit the ways the a:visited state can be styled. Color,
  background-color, and to some extend, outline, border are not affected, as long as you don't use
  alpha-transparency (rgba()), change the border-style or border-width, etc. Other changes will be
  ignored and fall back to what is specified for the a:link state.

其大意就是a:visited偽類可能會暴露用戶瀏覽信息記錄,攻擊者可能會據此判斷用戶曾經訪問過的網站,造成不必要的損失,因此這些瀏覽器決定限制a:visited的功能,所以不是代碼的問題,而是瀏覽器方面的限制。

所以,若是用下划線來判斷某鏈接是否曾被點擊過是失效的,那么我們就只能通過設置顏色來區別了,這時候我們就要嚴格遵從lvha規則了。但在寫小demo學習時又會發現有時候頁面在經過改動后刷新會自動顯示鏈接的顏色為:visited設置中的顏色,這是因為瀏覽器緩存的原因,在做小demo時可采用頭部meta編碼使其不再保留緩存:

<meta   http-equiv="Expires"   CONTENT="0">
<meta   http-equiv="Cache-Control"   CONTENT="no-cache">
<meta   http-equiv="Pragma"   CONTENT="no-cache">

以便測試。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM