1

В общем есть навигация. В Google Chrome все отображается так, как надо. Однако в Internet Explorer навигация сдвигается на несколько пикселей.

Вот сама навигация:

<ul id="menu">
    <li><a href="1.html">12345</a>
    <ul>
        <li><a href="2.html">1234</a>
            <ul>
            <li><a href="3.html">123</a></li>
            <li><a href="4.html">456</a></li>
            <li><a href="5.html">789</a></li>
            </ul>
        </li>
    </ul>
    </li>
</ul>

Вот стиль:

ul#menu,
ul#menu li,
ul#menu ul {
width: 160px; 
margin:0px;
padding:0px;
}

ul#menu li {
float: left; 
display: block !important; 
display: inline; 
}

ul#menu a {
display: block !important;
display: inline; 
background-color: #3d3e40;
padding-top:4px;
margin:0;
color: white;
text-decoration: none;
height: auto !important;
}

ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
text-decoration: none;
background: #648B43;
}

ul#menu li:hover li a,
ul#menu li.iehover li a {
background-color: #3d3e40;
}

ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
background: #648B43;
background-color: #3d3e40;
}

ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#menu ul,
ul#menu ul ul,
ul#menu ul ul ul {
margin-left: 160px;
margin-top: -24px;
position:absolute;
}

ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}

Не знаю как решить. Можно вот здесь - поменять в ul#menu a { padding-top:4px;} - можно поменять тут - например поставить 3 px. Тогда в internet Explorer все будет гуд. Однако теперь в Google chrome все сдвинется на пиксель. Спасибо!

2
  • Это у Вас в ИЕ10 уежает?
    – soledar10
    20 окт 2013 в 17:55
  • ДА. именно там
    – Nabla
    20 окт 2013 в 17:59

1 ответ 1

0

Можно так

<script> if (/*@cc_on!@*/false) { 
var headHTML = document.getElementsByTagName('head')[0].innerHTML; 
    headHTML    += '<link type="text/css" rel="stylesheet" href="css/ie10.css">'; 
   document.getElementsByTagName('head')[0].innerHTML = headHTML; 
} 
</script>

Это всвязи с тем, что ИЕ10 условные комментарии неподдерживает. Создаем файл ie10.css и прописываем стили.

7
  • в head вставляется этот скрипт в ie10.css прописываешь ul#menu a { padding-top:3px;}
    – soledar10
    20 окт 2013 в 18:11
  • все сделал как ты написал - ничего не поменялось. как будто не происходит перенаправления на ie10.css
    – Nabla
    20 окт 2013 в 18:19
  • в какой папке находиться ie10.css - должны находиться в папке css. Если у Вас папка имеет свое название - измените в скрипте css/ - на свое название папки
    – soledar10
    20 окт 2013 в 18:21
  • бросил прям в корень. путь href="ie10.css"
    – Nabla
    20 окт 2013 в 18:22
  • не работает? ссылку киньте где это меню! ЗНАЧИТ У ВАС ИЕ9, ПОЭТОМУ и НЕРАБОТАЛО ИЕ10 УСЛОВНЫЕ КОММЕНТАРИИ НЕ ПОДДЕРЖИВАЕТ!!!!!!!!!
    – soledar10
    20 окт 2013 в 18:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.