Firefox link visited security feature makes CSS debugging hard

One of the websites that I look after voluntarily had an interesting problem where some links on the page were appearing in white on a white background.

This only seemed to happen in Mozilla Firefox and the Firefox Web Developer Tools console (or indeed Firebug) suggested that the links should be styled in a totally different manner.

Link visited CSS debugging

Link visited CSS debugging

In an attempt to diagnose the problem is set different CSS transient selectors to render the text in wildly different colours (see the bottom right box of the screenshot above). Nothing seemed to work and the Developer Tools Inspector seemed to be lying about what was being displayed.

Eventually I managed to find Issue 4131: :visited CSS doesn’t show and Bug 557577 - make DOM inspector and firebug reflect :visited styles better  which gave me the final clue to allow me to find the CSS problem that was causing the issue.

Basically to stop visited link harvesters from performing drive-by harvesting of browser history the DOM inspector cannot see any :visited styles. There was an obscure very specific CSS style in my stylesheet that was setting visited links to white. Once found it was easy to change it to use the correct colour and everything is happy now.