html - CSS 水平菜单分隔符在 IE8 中不显示

Question

分隔符在 chrome 中显示，但在 IE8 中不显示，但在设计模式中显示

另一个问题是，本应不显示分隔符的最后一个子项(用户名)的左边框显示了分隔符。

Chrome View :

Orders | Manual Orders |                              Username

HTML 代码:

<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>

CSS:

#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*/
}

知道这里可能出了什么问题吗？

Answer 1

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

border-right: 1px solid#fff;

应该是:

border-right: 1px solid #fff;