Html css水平菜单分隔符未在IE8中显示

分隔符显示为chrome，但不是IE8，而是设计模式

另一个问题是，最后一个子项（用户名）左侧的边框（假定不显示分隔符）正在显示分隔符

浏览器视图：

Orders | Manual Orders |                              Username

<div id="navigation">
    <ul>
        <!-- Menu Items -->
        <li><a href="#">Orders</a></li>                              
        <li><a href="#">Manual Orders</a></li>                                               
        <!-- Username Information at the right side of the menu items  -->  
        <li style="float:right;padding-right:10px;color:#fef4f3;font-size:14px;">
            <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
        </li> 
    </ul>
</div>

#navigation
{
    float: left;
    width: 960px;
    background: #656565;    
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 1px 5px;
    color: #fff;    
    font-size: 14px;    
    border-right: 1px solid#fff;
}

#navigation li a:hover { 
    background: #f5625b; 
}

#navigation li:first-child a
{
    border-left: none; /*To remove first left separator*/
}

#navigation li:last-child a
{
    border-left: none; /*To remove last left separator*/
}

HTML代码：

Orders | Manual Orders |                              Username

<div id="navigation">
    <ul>
        <!-- Menu Items -->
        <li><a href="#">Orders</a></li>                              
        <li><a href="#">Manual Orders</a></li>                                               
        <!-- Username Information at the right side of the menu items  -->  
        <li style="float:right;padding-right:10px;color:#fef4f3;font-size:14px;">
            <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
        </li> 
    </ul>
</div>

#navigation
{
    float: left;
    width: 960px;
    background: #656565;    
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 1px 5px;
    color: #fff;    
    font-size: 14px;    
    border-right: 1px solid#fff;
}

#navigation li a:hover { 
    background: #f5625b; 
}

#navigation li:first-child a
{
    border-left: none; /*To remove first left separator*/
}

#navigation li:last-child a
{
    border-left: none; /*To remove last left separator*/
}

---

知道这里有什么问题吗？

IE对速记属性值之间的空格要求非常严格。其他浏览器如Chrome和FF可以很好地解析上述内容，IE则会忽略它

border-right: 1px solid#fff;

应该是：

border-right: 1px solid #fff;

---

IE8中不支持最后一个孩子…1）尝试将内联块放在#导航ul li上，而不是内联2）当第一个孩子在#导航li a上工作时，你可以像左边框一样：1px实心#fff@PravinVaichal内联块不起作用，第二个问题已解决！非常感谢。