导航中的高亮显示当前链接仅在Edge中不起作用

Question

我已经设置了一个简单的菜单，通过显示深红色背景突出显示用户所在的当前页面。这在Chrome和Firefox中运行良好。

但是，当我在 Edge 中查看时，它只能部分运行。它突出显示当前页面，但将背景颜色设置为白色而不是深红色。任何人都可以看到我做错了什么，为什么 Edge 为主动/当前链接而不是深红色选择白色背景？代码显示如下。

谢谢，

安迪; - ）

导航菜单（HTML / PHP）

<nav>
<ul>
<li class="<?php if ( $page == "index" ) { echo "current"; } ?>"><a href="index.php" title="Home Page of Site">Home</a></li>
<li class="<?php if ( $page == "page2" ) { echo "current"; } ?>"><a href="page2.php" title="page2 of site">Page2</a></li>
<li class="<?php if ( $page == "page3" ) { echo "current"; } ?>"><a href="page3.php" title="page3 of site">Page3</a></li>
<li class="<?php if ( $page == "page4" ) { echo "current"; } ?>"><a href="page4.php" title="Page4 of site">Page4</a></li>
</ul>      
</nav>

导航菜单（CSS）

.mainHeader nav{
    background-color: #444;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px;}

.mainHeader nav ul{
    list-style: none;
    margin: 0 auto;}

.mainHeader nav ul li{
    float: left;
    display: inline;}

.mainHeader nav a:link, .mainHeader nav a:visited{
    color: #fff;
    display: inline-block;
    padding: 5px 23px;
    height: 30px;
    text-decoration: none;}

.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav  ul li.current a:link, .mainHeader nav ul li.current a:visited{
    background-color:#DC143C;  /* Crimson Red Background for Current Link */
    color:#fff;  /* White font colour for Current Link *
} 

.mainHeader nav li a{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;}