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

StackOverflow https://stackoverflow.com/questions/1632418

Вопрос

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

Неправильно (ie6):

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

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

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

Но поскольку я не могу заставить overflow: visible работать или иным образом имитировать это, части выпадающих меню отключаются.В настоящее время 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: видимая ошибка, (как указано здесь: http://www.positioniseverything.net/explorer/expandingboxbug.html ), который делает overflow:visible недействительным.Прочтите до конца: Стратегия исправления ошибок макета в IE6? и попробовал несколько взломов, чтобы попытаться заставить его действительно действовать как overflow: visible, но ничего не сработало.

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

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

Предложения?

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

Я предлагаю использовать относительное положение к контейнеру с указанием верха, левого края и ширины

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top