Горизонтальное меню IE7 и IE8 совместимость Проблема - PullRequest
Новая
       8

Горизонтальное меню IE7 и IE8 совместимость Проблема

0 голосов
/ 12 сентября 2011

Я создал горизонтальное меню, которое прекрасно работает в Firefox 6, IE9, Safari, Chrome и Opera, но в IE7 и IE8 последняя ссылка в меню переходит на следующую строку, я прилагаю скриншот меню.

IE9 Скриншот горизонтального меню http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/

IE8 Скриншот горизонтального меню

http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/

Код HTML и CSS выглядит следующим образом: -

HTML код: - 

<ul class="menu">

        <li class="first"><a href="#">Bridal</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Bridesmaid</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Gentleman's</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Flower Girl</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Special Occassion</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Accessories</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li><a href="#">Shoes</a></li>

        <li><img src="images/divider.jpg" alt="Divider" /></li>

        <li class="last"><a href="#">Sale</a></li>

    </ul> <!-- END OF MENU -->

Код CSS: - 

ul.menu {
width: 965px;
height: 44px;
font-size: 18px;
color: #ffffff;
list-style: none;
margin: 0px;
padding: 0px;
}

ul.menu li {
float: left;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

ul.menu li a {
height: 34px;
color: #ffffff;
text-align: center;
display: block;
background-image: url(images/menu-normal.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 10px 17px 0px 17px;
}

ul.menu li.first {
background: none;
}

ul.menu li.first a {
width: 88px;
background-image: url(images/first-normal.png);
margin: 0px;
padding: 10px 0px 0px 8px;
}

ul.menu li a:hover {
background-image: url(images/menu-hover.jpg);
background-repeat: repeat-x;
}

ul.menu li.first a:hover {
background-image: url(images/first-hover.png);
}

ul.menu li.last a {
width: 68px;
background-image: url(images/last-normal.png);
margin: 0px;
padding: 10px 8px 0px 0px;
}

ul.menu li.last a:hover {
width: 68px;
background-image: url(images/last-hover.png);
}

Я нашел несколько похожих статей на этом и других форумах, но ни одна из них не была полезной. Я попробовал список-положение: внутри; дисплей: встроенный; и т.д., но ни один из них не работает. Еще одна деталь: я просматриваю html-страницу в браузере IE9, но проверяю их в режиме совместимости IE7 и IE8.

Спасибо, Радж

1 Ответ

0 голосов
/ 14 сентября 2011

У меня была та же проблема, похоже, что IE нравится добавлять невидимые поля и отступы, чтобы вы могли придать вашему меню немного большую ширину и впоследствии исправить положение, я предлагаю использовать другой файл CSS для IE.

...