IE 不会将锚链接标记为正确访问

Question

我在 CSS 中使用 a:visited 以不同方式标记访问过的链接。

我使用的链接是锚链接，格式为#news33。

点击后，链接在 IE 中以正确的颜色标记，但在重新加载页面时，颜色丢失。这适用于 Chrome。有人知道我应该怎么做吗？

顺便说一句，我在 Windows 8 上使用 IE 10。

我发布了一些示例代码，问题可以在 IE 中看到，我改编自 Twitter Bootstrap 的示例。

<script src="jquery.js"></script>
 <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <script src="bootstrap.js"></script>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; color:green; }
</style>
  <script type="text/javascript">
jQuery(document).ready(function($) {

   $('#test').click(function(){
            $('#test222').click();
  });

});
    </script>
<!-- <a id="test2" href="http://www.commerzbank.de" data-toggle="modal">google</a> -->
<a id="test" href="#test222">Launch demo modal</a>
<a id="test222" href="#myModal2" data-toggle="modal">Launch demo modal 22</a> 
<!-- Modal -->
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

需要注意的重要一点是，链接是用来显示模态的，而模态JS库没有跟随链接。

感谢和问候
西奥

Answer 1

CSS 顺序对某些浏览器很重要。我知道对于旧版本的 IE，如果您没有正确的规则顺序，属性将不会按预期显示。我希望 IE10 不会仍然有这个问题。

a:link {color:#FF0000;}         /* unvisited link */
a:visited {color:#00FF00;}      /* visited link */
a:hover {color:#FF00FF;}        /* mouse over link */
a:active {color:#0000FF;}       /* selected link */

http://www.w3schools.com/css/css_pseudo_classes.asp