Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Странное поведение IE7 в выпадающем меню


Автор: Rayled 2.6.2011, 17:07
Добрый день. Есть вот такая выпадающая менюшка. 
Код

<!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
Цитата(Rayled @  2.6.2011,  21:07 Найти цитируемый пост)
который по идее на меню не должен никак влиять

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

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

Кстати, чтобы поведение IE не было столь непредсказуемым, можно время от времени обращаться к http://haslayout.net/css/#general_bugs.

Автор: Rayled 3.6.2011, 08:48
Спасибо.

Автор: bars80080 3.6.2011, 12:25
Цитата(Amphiluke @  3.6.2011,  08:18 Найти цитируемый пост)
    background: url(#); /* thank you, IE */

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

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

Автор: Amphiluke 3.6.2011, 13:36
bars80080, а я хз. smile 
Вообще, идея этого решения (или похожего) была взята http://haslayout.net/css/No-Transparency-Click-Bug#solution-36, и вроде бы пока никто и ухом не моргнул.

Добавлено через 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.

 smile 

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

Еще был http://www.communitymx.com/content/article.cfm?page=3&cid=4E2C0 (именно с hover-ом, см. в синей рамке), где кроме изменения фона помогало указание размера шрифта (напр., абсолютно безопасное font-size: 100%;). Может, и тут сработает...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)