Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations.
Issue
I'm encountering a problem where some visited hyperlinks in IE 11 follow my :visited CSS rules while others do not. These links are all on the same page.
The hyperlinks correctly adhere to CSS :visited when leading to external websites, but fail to do so when pointing back to pages within my application, specifically when accessed through IIS 8.5 in IE 11. Interestingly, there are no issues when working locally with links directed to localhost on Visual Studio 2017’s default web server.
This behavior is unique to IE 11 and affects only hyperlinks to pages served by our IIS 8.5 web server. It seems that IE struggles to recognize these pages in its browsing history.
Speculation
My suspicion is that this could be related to how different web servers serve content, particularly in terms of HTTP response headers (refer to the 4th paragraph under Conclusion).
Application Code
The following code snippet is from my application. The hyperlinks should display in red once visited, which works fine except for the mentioned scenario.
ASP.NET
<asp:GridView runat="server" ID="resultsGridView" CssClass="results-grid">
<Columns>
<asp:HyperLinkField
HeaderText="Item #"
DataNavigateUrlFormatString="~/ItemDetails.aspx?id={0}"
DataNavigateUrlFields="ItemId"
DataTextField="ItemId"
ItemStyle-CssClass="item-number">
</asp:HyperLinkField>
<asp:BoundField>...</asp:BoundField>
</Columns>
<AlternatingRowStyle>...</AlternatingRowStyle>
</asp:GridView>
CSS
.results-grid .item-number {
font-weight: bold;
white-space: nowrap;
}
.results-grid .item-number a:visited {
color: red;
}
I went ahead and created a test page with hardcoded links, where three go to external sites and two replicate the IIS-served links from the grid view.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="https://www.w3schools.com">W3Schools Home</a><br/>
<a href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a><br/>
<a href="https://www.w3schools.com/css/">W3Schools CSS Tutorial</a><br/>
<a href="https://example.com/ItemDetails.aspx?id=201725">201725</a><br/>
<a href="https://example.com/ItemDetails.aspx?id=201774">201774</a>
</body>
</html>
After testing each link, the external site links showed up as red (as expected), while the application links did not (only in IE 11).
(When viewed in Edge, none of the links remained red, but let's focus on IE for now.)
Conclusion
I am unable to pinpoint why IE fails to honor :visited for certain links on the same page while doing so for others.
The issue is not related to using https, as all links in my test page are https.
It also doesn't depend on whether the visited pages appear in the browser history - all link URLs show up in history.
The browser caching setting does not seem to affect this behavior. Despite this, it's worth noting that IIS appends Cache-Control: private to every HTTP response, although local browser caching should remain unaffected. This peculiar behavior remains unexplained.
To reiterate, :visited works flawlessly in other browsers and even in IE for external sites and local links. The anomaly persists exclusively with links to the app hosted on IIS.
If anyone can provide insight into this phenomenon and help me resolve it, I would greatly appreciate it!