所以我已经在Chrome和Firefox中成功完成了这项工作。今天我意识到为什么不在IE中尝试它！好吧，看起来IE并不想完全一样......
有谁知道我怎么能以不同的方式做到这一点，以使它也适用于IE？
HTML：
<div id="navbar">
<div id="navlinks">
<nav>
<ul id="navlist">
<li><a href="#">HOME</a></li>
<li><a href="#">ASSIGNMENTS</a></li>
<li><a href="#">DREAM CARS</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
CSS：
body{
margin:0 auto;
}
#logo{
margin:auto;
width:430px;
}
#navbar{
width:100%;
height:50px;
display:table;
margin:auto;
}
#navlinks ul {
display:table;
border-collapse:collapse;
width:100%;
margin:0 0 20px;
padding:0;
list-style:none;
}
#navlinks li {
display: table-cell;
vertical-align: middle;
text-align:center;
width:20%;
background: linear-gradient(to right, #111 50%, #444 50%);
background-size: 200% 100%;
background-position:left top;
transition:all 1s ease;
}
#navlinks li:hover{
background-position:right top;
}
#navlinks a {
text-decoration:none;
color: #999;
text-transform: uppercase;
display:block;
padding-top:10px;
padding-bottom:10px;
font: bold 12px/25px Arial, Helvetica;
transition:color 1s ease-in-out;
}
#navlinks li:hover a{
color:black;
}