Question

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

其他问题是，假设不显示分隔符的最后一个子（Username）的border-left正在显示它。

Chrome浏览器

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;

在IE8中没有显示css水平菜单分隔符

1 个答案: