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

Обновлять:

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

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

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

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

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

Теперь повторите шаги. Когда вы нажимаете «Везде» во второй раз, отображается блок меню 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>

css internet-explorer ie8-compatibility-mode
person chris    schedule 12.08.2011    source источник
comment
может быть, это только у меня, но у меня это вообще не работает в IE. (все версии)   -  person Thomas Shields    schedule 12.08.2011
comment
Что не работает? Меню или отображение проблемы?   -  person chris    schedule 12.08.2011
comment
всплывающее меню не работает. У меня даже подменю не открывается. Я думаю, что IE сегодня ведет себя странно; Я делал такие меню раньше, и это сработало.   -  person Thomas Shields    schedule 12.08.2011
comment
В других браузерах работает? Какая версия ИЕ?   -  person chris    schedule 12.08.2011

Ответы (5)


arrow_upward
1
arrow_downward

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

РЕШЕНИЕ

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}
person Knu    schedule 15.08.2011
comment
К сожалению, похоже, это не исправить. - person chris; 15.08.2011
comment
Похоже, это работает. Можете ли вы объяснить, что вы изменили, и почему это устраняет проблему? - person chris; 15.08.2011
comment
@chris Это включает сброс, каскад, специфичность и, возможно, hasLayout. Для ленивых Ив добавил исправленный css. - person Knu; 16.08.2011

arrow_upward
1
arrow_downward

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

person BenB    schedule 15.08.2011
comment
Предположительно, он действительно хочет, чтобы это работало в старых браузерах, а не просто отключало режим совместимости для новых. - person Aaronaught; 15.08.2011
comment
Обычно я бы предпочел, чтобы пользователи обновляли свой браузер, но в случае с IE, поскольку он не устанавливается на XP, а у многих он все еще есть, это фактически не бесплатное обновление. Так что пока нет другого выбора, кроме как приспособиться к старым браузерам. - person Chains; 15.08.2011
comment
@BenB: Не могу этого сделать, потому что тогда большая часть сайта перестанет работать должным образом. Это в приложении для интрасети, и они обычно медленно развертывают обновления браузера. - person chris; 15.08.2011

arrow_upward
0
arrow_downward

Навигация работает, как и ожидалось в 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

person phteven    schedule 12.08.2011
comment
Я бы хотел, чтобы что-то работало в IE7+, но мне бы очень хотелось понять, почему это НЕ работает в режиме совместимости. - person chris; 12.08.2011

arrow_upward
0
arrow_downward

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

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" >
person Chains    schedule 15.08.2011

arrow_upward
0
arrow_downward

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

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

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

РАБОЧИЙ КОД

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

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

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

person sg3s    schedule 16.08.2011