Проблемы с CSS: с настраиваемой навигацией ul, li в ie, особенно с переполнением ie6: видимая ошибка - PullRequest
Новая
       29

Проблемы с CSS: с настраиваемой навигацией ul, li в ie, особенно с переполнением ie6: видимая ошибка

0 голосов
/ 27 октября 2009

Суть ошибки ie6 (выпадающие записи должны быть обрезаны из-за скрытого переполнения, чтобы предотвратить неправильное расширение, вместо того, чтобы действовать как переполнение: видимый), можно увидеть в его текущей (хакерской) форме на скриншоте ниже и на сайт http://zd -cms.com

Неправильно (т.е. 6):

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

Справа (FF, IE8, Chrome):

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

Пункт меню должен показывать:

  • Свяжитесь с нами
  • Вторичное жилье
  • Поддержка
  • Дизайнерские услуги

Но так как я не могу получить переполнение: видимая работа или иная имитация, части выпадающих меню отключаются. В настоящее время CSS в таблице стилей для ie6: 

#zd-nav {
  padding-left:0;
  margin-left:0;
  background-color:transparent;
}
#zd-nav .zd-sub-nav{
  margin-top:5px;
  **width:73px**;
  **overflow:hidden;**
}

Несколько решений этой ошибки, которые я попробовал: Я знаю об ошибке ie6 overflow: visible, (согласно здесь: http://www.positioniseverything.net/explorer/expandingboxbug.html), которая отображает переполнение: visible null и void. Прочитайте: Стратегия исправления ошибок макета в IE6? и несколько попыток попытались заставить его действительно действовать как переполнение: видимый, но ничего не помогло.

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

Также было бы очень полезно указать на любые проблемы с навигацией в ie7 или ie8.

Предложения

Ответы [ 5 ]

1 голос
/ 04 ноября 2009

Попробуйте это (при условии, что вы хотите, чтобы выпадающий список [плюс sub sub sub] также имел возможность "плавать" над любыми другими элементами на странице, которые мешают): 

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

Принудительное указание ссылки на суб-навигацию в положение относительное не изменит положение на странице. Тем не менее, он позволяет вам использовать абсолютное положение для дочерних элементов, сохраняя их по умолчанию в родительском элементе, И освобождая его от «потока» страницы (таким образом предотвращая эффект нажатия).

1 голос
/ 09 ноября 2009

Это сработало для меня: 

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

Число с плавающей точкой дает li правильную ширину, а относительное положение и z-индекс показывают его выше (т.е. не ограниченный) ul.

0 голосов
/ 10 ноября 2009

Я предлагаю использовать относительную позицию к контейнеру, с указанием top и left и width

0 голосов
/ 10 ноября 2009

Это должно работать 

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

Автоматическая ширина используется для принятия размера каждого элемента навигации без необходимости назначать каждому фиксированную ширину.

Надеюсь, это поможет.

0 голосов
/ 27 октября 2009

Попробуйте либо: 

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

или ... 

width:100%; /*instead of setting the width to 73px*/

Вы могли бы сделать height:100%; также.

Это проблема hasLayout, которую изобрела Microsoft. Нашел информацию здесь: http://zoffix.com/css/ie/haslayout.shtml

Надеюсь, это поможет ...

...