Необычный a: поведение при наведении (IE 8)

#asp.net #css #internet-explorer-8

#asp.net #css #internet-explorer-8

Вопрос:

У меня есть навигационное меню, которое меняет цвет фона при наведении. Ниже приведены два изображения. Первое изображение показывает поведение, которое у меня есть во всех браузерах, кроме IE 8 (не тестировал ничего ниже 8). Второе изображение показывает поведение в IE 8. Я бы хотел, чтобы IE 8 выглядел как все остальное (заполняя панель навигации). Я также опубликовал CSS и ASP.Net для меню. Любая помощь приветствуется!

введите описание изображения здесь

введите описание изображения здесь

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

Ответ №1:

Создайте свои a элементы display: block :

 ul#mainNav li a {
    display: block;

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

Комментарии:

1. Это было удивительно легко исправить. Спасибо!

2. Вы также можете попробовать установить высоту строки на нужную вам высоту