Why Does Changing the Background Image of Visited Links with CSS :visited Fail in Google Chrome?

Google Chrome :visited Background Image Issue

Web developers have encountered an issue where changing the background image of a visited link using the CSS :visited pseudo-class fails to work in Google Chrome while functioning in other browsers like Firefox, IE, and Opera.

One user encountered this issue with the following code:

<code class="css">.forum_box .title a {
  background-image:url(../images/f_unread.png);
  background-position:10px center;
  background-repeat:no-repeat;
  background-color:transparent;
  color:#2D4054;
  font-size:14px;
  padding:10px 12px 10px 44px;
  text-decoration:none;
  display:block;
  font-weight:bold;
}
.forum_box .title a:visited {
  background-image:url(../images/f_read.png);
}</code>

Attempts to use a color instead of an image or to incorporate both in the background property also failed in Chrome.

Privacy Concerns and Mozilla's Solution

As the user updated, this issue may be related to privacy concerns. Mozilla announced changes in CSS :visited in March 2010 to address these concerns, and the bug linked by the user suggests that the current behavior is intentional and will likely be discontinued in future versions of Firefox as well.

Solution

Currently, the recommended workaround is to use background-color instead of background-image to change the appearance of visited links. While this may not provide the desired visual effect, it ensures compatibility across browsers.

The above is the detailed content of Why Does Changing the Background Image of Visited Links with CSS :visited Fail in Google Chrome?. For more information, please follow other related articles on the PHP Chinese website!