Меню CSS не хорошо выглядит с IE8 ⇐ CSS

[Anonymous]

По какой -то причине мое горизонтальное меню выглядит очень плохо на IE8 (и, вероятно, также предыдущих версиях) (см. Первое фото). Нет проблем с последней версией Safari, Firefox и Chrome (см. Second Pic).
Есть идеи, почему и как это исправить? src = "https://i.sstatic.net/gdt0m.jpg"/>
css code:
#nav
{
right:2%;
list-style:none;
position:fixed;
/* float:right; */
top:30px;
z-index:1000;
/* width:520px; */
}

#nav > li {
display: inline-block;
/* dirty hack for IE7 */
*display: inline;
*zoom: 1;
}

#nav a
{
float:left;
top:30px;
display:inline-block;
font-size:11px;
margin-left:5px;
margin-right:5px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:24px;
color:#666;
line-height:24px;
text-align:center;
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
background:rgba(255,255,255,0.9);
text-transform:uppercase;
}

#nav a:hover
{
background:#dedede;
}

#nav .current a
{
background:#666;
color:#ededed;


Подробнее здесь: https://stackoverflow.com/questions/116 ... d-with-ie8