Странная проблема: меню на основе CSS ведет себя по-разному в режиме совместимости IE - PullRequest
Новая
       14

Странная проблема: меню на основе CSS ведет себя по-разному в режиме совместимости IE

2 голосов
/ 12 августа 2011

Обновление:

Я добавил к этому вознаграждение.Чтобы заявить об этом, мне нужна версия приведенного ниже кода, в которой НЕ проявляются описанные мной симптомы.

Вот простой тестовый пример.В Chrome, Firefox и IE8 с отключенным режимом совместимости это работает как положено.Тем не менее, включите режим совместимости (переключите Tolls-> Compatibility View) есть сбой с отображением и скрытием некоторых блоков меню.

Чтобы увидеть проблему:

Сохраните пример вфайл и просмотрите его через веб-браузер (обратите внимание, что если вы просто загружаете его из файла, вы не можете включить представление совместимости - он должен быть доставлен с веб-сервера).

Переместите мышьиз «Здесь» в «Там» в «Везде», затем вниз, чтобы выделить «Нет» и отобразить меню 3-го уровня.Переместите мышь к влево .Отображается только верхнее меню.

Теперь повторите шаги.Когда вы нажимаете «Везде» во 2-й раз, отображается блок меню 3-го уровня, но в нем ничего нет.

Есть ли способ предотвратить это, даже в представлении совместимости?

Образец: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>test</title>
<style>
#navRaw, #navRaw ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
   position: relative;
   line-height: 26px;
}
#navRaw a{
   display: block;
   padding: 0px 5px;
   color: #000;
   text-decoration: none;
   background-color: silver;
      line-height: 28px !important;
}
#navRaw a:hover{
   background-color: #ccc;
   color: #fff;
}
#navRaw li{
   float: left;
   position: relative;
}
#navRaw ul{
   position: absolute;
   display: none;
   top: 28px;
}
#navRaw li ul a{
   width: 220px;
   height: auto;
   float: left;
}
#navRaw ul ul{top: auto;}
#navRaw li ul ul{
   left: 230px;
   margin: 0px 0 0 0px;
}
#navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul{ display: none;}
#navRaw li:hover ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid Black;
}
</style>
</head>
<body>
   <ul id="navRaw">
      <li><a href="#"><b>Here</b></a></li>
      <li><a href="#"><b>There</b></a></li>
      <li><a href="#"><b>Everywhere</b></a>
         <ul>
            <li><a href="#"><b>Yes</b></a></li>
            <li class="showsub"><a href="#"><b>No</b></a>
               <ul>
                  <li><a href="#"><b>Why</b></a></li>
                  <li><a href="#"><b>Why not</b></a></li>
               </ul>
            </li>
            <li class="menusep"><a href="#"><b>Perhaps</b></a></li>
         </ul>
      </li>
   </ul>
</body>
</html>

Ответы [ 5 ]

1 голос
/ 15 августа 2011

Из любопытства, почему бы просто не отключить режим совместимости с мета-тегом, совместимым с x-ua?

1 голос
/ 15 августа 2011

Мне нужна версия приведенного ниже кода, которая НЕ показывает описанные мной симптомы.

РЕШЕНИЕ

http://jsbin.com/oketat/

ИЗМЕНЕННЫЙ CSS 

#navRaw li:hover > ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ 
   display: block;
   border: 1px solid black;
}
#navRaw li:hover ul li ul li a {background-color:transparent}  
#navRaw li li:hover ul li a {background-color:silver !important}
0 голосов
/ 17 августа 2011

Ваш оригинальный вопрос: как / почему IE отстой ... Я не буду вдаваться в эту адскую дыру, но скажу вам, что относительно просто вызвать ошибки компоновки / отображения в «более ранних» версиях.Хотя IE9 движется в правильном направлении.

Что касается рабочего кода, я не могу точно сказать, что вы сделали неправильно в этом конкретном случае, но, скорее всего, это комбинация одной или нескольких ошибок в крайнем случае и стилей IEМне не нравятся некоторые элементы.

Я перестроил меню с нуля, так как таким образом я точно знаю, что я делаю / знакомлю с каждым шагом ... Это просто большой опыт и поиск / чтение техредкие ошибки IE, чтобы быть в состоянии сделать это, это скучно.

РАБОЧИЙ КОД

http://jsfiddle.net/r52D6/69/

Отказ от ответственности: Это не было тщательно протестировано, нодолжно работать нормально, если только не в режиме причуд, конечно, он также работает в реальных браузерах.

Кстати, вы можете активировать режим совместимости на своем локальном ПК, используя инструмент разработчика IE (f12).Я также убедился, что ошибка в старом коде может быть воспроизведена в среде jsfiddles перед запуском.Имейте в виду, что jsfiddle имеет нормализующий скрипт, и не все фактические применяемые стили находятся в моем собственном коде, но я надеюсь, что вы справитесь с этим.

0 голосов
/ 15 августа 2011

При определенных условиях IE-7 рендерится в режиме IE-5.Это (ниже) не рекомендуется в качестве общей практики, но если вы хотите предотвратить это, вы можете попробовать это: 

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" >
0 голосов
/ 12 августа 2011

Навигация работает в IE9, как и ожидалось для меня.В режиме браузера: IE7 я могу воссоздать ошибку, которую вы описываете.По сути, вам нужна многоуровневая навигация на основе CSS, которая работает в IE7 +?

Можете ли вы просто проверить другие существующие примеры, которые работают, и применить к ним ваши элементы навигации?http://www.stunicholls.com/menu/hover_drop_1.html

http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html

...