Выпадающее меню не работает в Firefox / Chrome

#html #css #internet-explorer #drop-down-menu

#HTML #css #internet-explorer #выпадающее меню

Вопрос:

Итак, давайте просто скажем, что я заставил все это работать в IE, поскольку проблемы всегда возникают в IE. Но теперь выпадающее меню отображается позади содержимого в других браузерах, таких как Firefox и chrome. Все, что я сделал, это удалил z-индекс в #head div.

Веб-сайт:http://www.stingrayimages.ca /

С Z-index: он ломается в IE, без него он не работает в других браузерах.

В любом случае, чтобы исправить выпадающее меню без добавления z-индекса в головной раздел?

 #head {
    position:relative;
    height: 140px;
    width: 100%;
    background: #FFF;
    filter:alpha(opacity=93);
    padding-top:20px;
    /* CSS3 standard */
    opacity:0.93;
    -moz-box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
}

1. Ссылка на пример была бы действительно полезной. В противном случае вы всегда можете использовать условную таблицу стилей для добавления z-индекса в для IE.

2. @FreeAsInBeer @amusetill Извините, что добавил веб-сайт

3. @amusetill я пытался отказаться и использовать условную таблицу стилей для z-индекса, но по какой-то причине это не работает, но я знаю, что таблица стилей работает.

Ответ №1:

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

Кроме того, IE9 показывает ту же проблему, что и Chrome и FireFox 4.

1. Черт возьми, это работает! я предполагаю, что я не могу иметь непрозрачность там? Непрозрачность составляла 93%, и это было слишком много?

2. Да, 93% было слишком много, потому что цвета фона очень похожи на цвет текста в выпадающем списке. Если вы хотите сохранить прозрачность, поэкспериментируйте с настройкой. Сделайте что-то вроде установки его на 20% и посмотрите, как это выглядит. Измените его на 40% и посмотрите, как это выглядит снова. Продолжайте делать это, пока не получите значение непрозрачности, которое вас устраивает.

3. Теперь только IE6 вызывает у меня проблемы.

4. IE6 — проклятие всех веб-дизайнеров. Я бы заподозрил, что проблема вызвана position: relative. Проверьте onderhond.com/blog/work/ie6-core-bug-fixing для исправлений.

Ответ №2:

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

Ответ №3:

Единственное, что вы можете сделать, это вернуть z-индекс обратно и посмотреть исправление IE для него.

Еще одна вещь, которую следует учитывать, — это порядок отображения и древовидная структура вашего html, поскольку это влияет на то, что находится сверху. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look эта статья объясняет это намного лучше, чем я могу.

Если вы можете сослаться на пример сайта, над которым вы работаете, возможно, нам будет проще дать более конкретный ответ.