VPF::Странное поведение IE7 в выпадающем меню

Rayled

Дата 2.6.2011, 17:07 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: 3
Всего: 3

Добрый день. Есть вот такая выпадающая менюшка.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <style type="text/css">
   ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
   }
   #nav {
    height: 25px;
    font: bold 12px/25px Times, serif;
   }
   #nav li {
    float: left;
    position: relative;
   }
   #nav ul li {
    float: none;
   }
   #nav a {
    display: block;
    text-decoration: none;
   }
   #nav ul a {
    width: 100px;
   }
   #nav ul {
    position: absolute;
    display: none;
   }
   #nav li:hover ul {
    display: block;
   }
   #nav li:hover ul li ul {
    top: 0;
    left: 100%;
    display: none;
   }
   #nav li:hover ul li:hover ul {
    display: block;
   }
   #nav li:hover ul a {
    color: #fff;
    background: #000;
   }
  </style>
 </head>
 <body>
  <ul id="nav">
   <li><a href="#">1</a>
    <ul>
     <li><a href="#">1-1</a>
      <ul>
       <li><a href="#">1-1-1</a></li>
       <li><a href="#">1-1-2</a></li>
      </ul>
     </li>
     <li><a href="#">1-2</a>
      <ul>
       <li><a href="#">1-2-1</a></li>
       <li><a href="#">1-2-2</a></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </body>
</html>

Когда я убираю самый последний селектор, который по идее на меню не должен никак влиять, так как там только изменение цвета и фона, то в IE7 наблюдается глюк при котором не получается навести курсор на подменю. Что это за ерунда такая?

Amphiluke

Дата 3.6.2011, 08:18 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

Цитата(Rayled @ 2.6.2011, 21:07

)

который по идее на меню не должен никак влиять

Еще как влияет. smile

Для IE6-7 наличие фона элемента меняет многое, например он (элемент) перестает вести себя как «дырявый», т.е. внутренняя область элемента вся становится чувствительной к событиям мыши. Если вам нужно убрать фон, можно поступить, к примеру так:

Код


#nav li:hover ul a {
    background: url(#); /* thank you, IE */
}

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

Rayled

Дата 3.6.2011, 08:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: 3
Всего: 3

Спасибо.

bars80080

Дата 3.6.2011, 12:25 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(Amphiluke @ 3.6.2011, 08:18

)

background: url(#); /* thank you, IE */

ох ты. как я понимаю, браузер делает запрос на картинку baseurl# ?

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

Amphiluke

Дата 3.6.2011, 13:36 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

bars80080, а я хз. smile

Вообще, идея этого решения (или похожего) была взята отсюда, и вроде бы пока никто и ухом не моргнул.

Добавлено через 1 минуту и 54 секунды

Цитата

What this actually does is sets the currently loaded page as the url() for the background - yes, there will be an extra HTTP request due to this, but in my opinion it's really nothing to worry about because the page would be cached by then.

SelenIT

Дата 3.6.2011, 14:29 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Как вариант, можно попробовать background:url(about:blank) — это точно на сервер ничего не пошлет smile

.

Еще был родственный баг (именно с hover-ом, см. в синей рамке), где кроме изменения фона помогало указание размера шрифта (напр., абсолютно безопасное font-size: 100%;). Может, и тут сработает...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »