CSS: display:inline does not seems to work on IE

I use CSS to make a unordered list ul to be displayed horizontally like this

 <div id="header">
     <ul>
        <li class="header-li">....</li>
        <li class="header-li" style="width: 200px; display: inline-block;">
                            ...                                
        </li>                            

     </ul>
 </div>

here is my css

#header
{ 
    height: 30px;
  开发者_JAVA技巧  width: 985px;
    padding: 0px 10px 0px;
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    overflow: hidden;
}
#header ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.header-li{
    display: inline;    
    padding-right: 20px;
}

display:inline is help display my list horizontally, this work on FF, Safari and Chrome but does not work on IE8. Help please here is some screen shot show the different between Firefox look and IE look

you want to use float:left as opposed to display:inline for the better support