gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:41:29 25 4
gpt4 key购买 nike

分隔符在 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*/
}

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

最佳答案

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

border-right: 1px solid#fff;

应该是:

border-right: 1px solid #fff;

关于html - CSS 水平菜单分隔符在 IE8 中不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22697694/

25 4 0