При некоторых уровнях масштабирования раскрывающееся меню имеет прозрачные пробелы в IE7 - PullRequest
Новая
       21

При некоторых уровнях масштабирования раскрывающееся меню имеет прозрачные пробелы в IE7

0 голосов
/ 03 октября 2011

Пожалуйста, рассмотрите мой урезанный код ниже, который иллюстрирует мою проблему.

Если я запускаю его в Firefox 7 или IE8, он работает нормально. Однако при нажатии клавиши F12 и входе в чудесный мир IE7 я испытываю пробелы в своем оранжевом списке при некоторых уровнях масштабирования (поэтому, пожалуйста, используйте «Ctrl + колесо мыши», когда меню расширено, чтобы воспроизвести ошибку).

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

Любое предложение о том, что вызывает проблему?
Кроме того, как лучше всего справиться с этим, если требуется исправление IE7, чтобы мое меню оставалось точно таким же в других браузерах? 

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>IE 7 Menu Test</title>
    <style type="text/css">
      body {
        line-height: 1;
      }

      ul li {
        background: #A0A0A0;
      }

      ul li ul li {
        background: #FF9900;
        display: block;
        white-space: normal;
        width: 200px;
      }

      ul ul {
        position: absolute;
      }

      div ul ul,div ul li:hover ul ul,div ul ul li:hover ul ul
        {
        display: none;
      }

      div ul li:hover ul,div ul ul li:hover ul,div ul ul ul li:hover ul
        {
        display: block;
      }
    </style>
  </head>
<body>

  <div><ul><li>Menu
      <!-- drop down list -->
      <ul>
        <li>- One</li>
        <li>- Two</li>
        <li>- Three</li>
        <li>- Four</li>
      </ul><!-- end drop down list -->
  </li></ul></div>

</body></html>

1 Ответ

0 голосов
/ 03 октября 2011

Вы столкнулись с этой ошибкой: http://www.brunildo.org/test/IEWlispace.php

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

Вот ваш оригинальный код: http://jsbin.com/itaxek

Одним из возможных исправлений является перемещение width: 200px; с ul li ul li на ul ul: http://jsbin.com/itaxek/2

...