异常的a：悬停行为IE 8

问题描述

| 我有一个导航菜单，可在悬停时更改背景颜色。以下是两个图像。第一张图片显示了我在所有浏览器中的行为，但IE 8（没有测试低于8的东西）。第二幅图像显示了IE 8中的行为。我希望IE 8看起来像其他所有东西（填充导航栏）。我还为菜单发布了CSS和ASP.Net。任何帮助表示赞赏！ 网络

<ul id=\"mainNav\" runat=\"server\">
    <li><asp:HyperLink runat=\"server\" NavigateUrl=\"~/Home.aspx\">Home</asp:HyperLink></li>
    <li><asp:HyperLink runat=\"server\" NavigateUrl=\"~/vendors.aspx\">Our vendors</asp:HyperLink></li>
    <li><asp:HyperLink runat=\"server\" NavigateUrl=\"#\">Customer Support</asp:HyperLink></li>
    <li><asp:HyperLink runat=\"server\" NavigateUrl=\"#\">Technical Assistance</asp:HyperLink></li>
    <li><asp:HyperLink runat=\"server\" NavigateUrl=\"SalesExecutives.aspx\">AMS Sales Assistance</asp:HyperLink></li>
</ul>

的CSS

ul#mainNav {
    float: right;
    margin: 8px 0 0 0;
}

ul#mainNav li {
    font-size: 14px;
    color: #746935;
    float: left;
}

ul#mainNav li a {
    color: #746935;
    text-decoration: none;
    padding: 8px 8px 9px 8px;
}

ul#mainNav li a:hover,ul#mainNav li a.active {
    color: #ffffff;
    background-color: #746935;
    padding: 8px 8px 9px 8px;
}

    

解决方法

使您的

a

元素

display: block

：

ul#mainNav li a {
    display: block;

    color: #746935;
    text-decoration: none;
    padding: 8px 8px 9px 8px;
}