Problème Menu horizontal avec IE10

Bonjour,

IE10 la grand nouveauté qui fonctionne encore à merveille...

Sous IE9, IE8, IE7... le menu de mon site marche; Mais sous IE10, les <li> ne s'enchainent pas pour créer un menu horizontal, cela fait apparaitre un menu vertical dont chaque onglet fait la largeur du site...

le code du menu est :

<ul id="header-menu">
                <li class="first current">
                <a href="..."><span><span class="home-link"></span></span></a>
                </li>
                <li><a href="..."><span>Lien 1</span></a></li>
                <li><a href="..."><span>lien 2</span></a></li>
              etc ........
                <li class="last"><a href="..."><span>Lien 999</span></a></li>
                </ul>

Voici le CSS utilisé pour afficher le menu:

#header-menu {
    padding: 0;
    font-family:'AllerRegular', arial;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}
#header-menu li{
    list-style: none;
    margin: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
#header-top{
    height: 110px;
}
#header-menu li:hover span.home-link{
    background-position:  0 -29px;
}
#header-menu span.home-link{
    background: url(../images/menu/home.png);
    width: 16px;
    height: 29px;
    display: block;
    top: 5px;
    position: relative;
}
#header-menu li.first{
    background: url(../images/menu/bg-left.png) left center no-repeat;
    padding-left: 7px;
}
#header-menu li.first:hover{
    background: url(../images/menu/bg-hover-left.png) left center no-repeat;
}
#header-menu li.first.current{
    background: url(../images/menu/bg-hover-left.png) left center no-repeat;
}
#header-menu li.first a > span{
    padding-left: 11px;
}
#header-menu li.last{
    background: url(../images/menu/bg-right.png) right center no-repeat;
    padding-right: 7px;
}
#header-menu li.last:hover{
    background: url(../images/menu/bg-hover-right.png) right center no-repeat;
}
#header-menu li.last.current{
    background: url(../images/menu/bg-hover-right.png) right center no-repeat;
}
#header-menu li.last a{
    background: none;
    padding-right: 0;
}
#header-menu li.last a > span{
    padding-right: 11px;
}
#header-menu li a{
    color: #eeeeee;
    display: block;
    line-height: 40px;
    text-decoration: none;
    padding-right: 5px;
    background: black url(../images/menu/bg-separate.gif) right center no-repeat;
}
#header-menu li:hover a{
    color: black;
    background: #6ca21b url(../images/menu/bg-hover-separate.gif) right center no-repeat;
}
#header-menu li.current a{
    color: black;
    background: #6ca21b url(../images/menu/bg-hover-separate.gif) right center no-repeat;
}
#header-menu li a > span{
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.75);
    background:  black url(../images/menu/bg.gif);
    padding-left: 18px;
    padding-right: 16px;
    display: block;
    height: 40px;
    font-size: 14px;
}
#header-menu li:hover a > span{
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
    background: #6ca21b url(../images/menu/bg-hover.gif);
}
#header-menu li.current a > span{
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
    background: #6ca21b url(../images/menu/bg-hover.gif);
}

#header-menu li, #header-menu li a, #header-menu li a span{
    transition-property: all;
    transition-duration: 80ms;
    transition-timing-function: ease-in;
    -webkit-transition-property: all;
    -webkit-transition-duration: 80ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: all;
    -moz-transition-duration: 80ms;
    -moz-transition-timing-function: ease-in;
}

Et pour IE, j'ai rajouté dans le header de mes pages:

<!--[if IE]>
    <link type="text/css" rel="stylesheet" href="./styles/ie.css" />
    <![endif]-->

Dont ie.css est:

#header-menu {
    display: block;
}
#header-menu li{
    display: block;
    float: left;
}
#header-menu li a > span{
    padding-left: 20px;
    padding-right: 17px;
}

Un GRAND merci Si quelqu'un avait une solution pour redonner à mon site un menu horizontal qui marche sous IE10... sniff...

Salutations!
Vincent.