Проблемы с CSS:с пользовательской выпадающей навигацией ul, li в ie, особенно с переполнением ie6: видимая ошибка
-
06-07-2019 - |
Вопрос
Суть ошибки ie6 (выпадающие записи должны быть усечены с помощью overflow hidden, чтобы предотвратить неправильное расширение ie вместо того, чтобы действовать как overflow: visible) можно увидеть в его текущей (взломанной) форме на скриншоте ниже и на сайте http://zd-cms.com
Неправильно (ie6):
Справа (FF, IE8, Chrome):
Пункт меню должен показывать:
- Связаться с нами
- Торговые посредники
- Поддержка
- Дизайнерские Услуги
Но поскольку я не могу заставить 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
}
Автоматическая ширина используется для изменения размера каждого элемента навигации без необходимости присваивать каждому из них фиксированную ширину.
Надеюсь, это поможет.
Я предлагаю использовать относительное положение к контейнеру с указанием верха, левого края и ширины