Why Doesn't My :visited CSS Style Work in Modern Browsers?

Why the :visited CSS Style Doesn't Work?

In a recent attempt to prevent a CSS exploit, a security feature has been implemented in modern browsers such as Firefox 4, Internet Explorer 9, and Chrome, which restricts the functionality of the :visited pseudoclass. This explains why the code snippet provided in the question doesn't work as intended.

In the code, a rule is defined to change the appearance of links when they are visited, setting the font weight to normal and the color to black. However, if this code is opened in Internet Explorer or Chrome, the link remains bold even after it has been visited.

The security issue arises because changing the font weight of visited links can impact the element's width. Therefore, even though browsers have restricted the ability to change font weight for visited links, they have also implemented additional protections to prevent circumventing this security measure.

These protections include:

• window.getComputedStyle() and similar functions return values indicating that the link has not been visited.
• Adjacent elements using a sibling selector (e.g., :visited span) will be styled as if the link were unvisited.
• In specific scenarios involving nested link elements, the element being matched may be rendered as if the link were unvisited.

As a result of these security features, there is currently no viable workaround for this issue. The :visited pseudoclass is effectively restricted in most modern browsers to prevent potential exploits.

The above is the detailed content of Why Doesn't My :visited CSS Style Work in Modern Browsers?. For more information, please follow other related articles on the PHP Chinese website!