2015-01-21 2 views
1

Я работаю над проектом, где все работает отлично в новых браузерах, но не в IE8, когда я тестирую.Bootstrap navbar dropdown частично скрыт в IE8 - почему?

Выпадающее меню работает, но скрывается за основного содержания под названием <div class=".container.justering">

Смотрите код здесь: http://blanken.redigering.net/tester.html

В Chrome выпадающее меню отлично работает. В IE 11 он отлично работает. В IE8 он скрывается за основным контейнером.

Похоже, что <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> ведет себя как у overflow:hidden;, но это не так.

+0

Вы пробовали свойство 'z-index'? –

+0

Да, у меня есть. Но я, возможно, перепутал это.Я пробовал z-index: 999 в .navbar-обратном и z-index: 777; на .container.justering. Но я, возможно, забыл добавить позицию: – Preben

ответ

1

Добавление z-index в Bootstrap .dropdown класс (просто переопределить его в файле CSS) должен решить вашу проблему.

Обратите внимание, что z-index не будет работать на статическом элементе, например .navbar-inverse.

Элементы должны быть расположены, например. относительно или абсолютно.

Также значение z-index не должно быть случайным, но столь же высоким/низким, каким оно должно быть.

Если это не исправить, я помню, что где-то читал, что IE8 имеет проблемы с CSS filter собственности, которая используется во всем Bootstrap CSS градиентов и т.д.

Решение, чтобы добавить фильтр: нет! важный; к элементу типа .navbar или .navbar-inner или .dropdown.

Адрес where I read about it.

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

+0

Я добавил это сейчас: '.dropdown {z-index: 1! Important;}', но это не помогает в IE8, который я сейчас открываю. Он имеет положение: относительный; по умолчанию css. – Preben

+0

@Preben Вы пытались добавить более высокие значения? Чтобы переопределить Bootstrap CSS, вам необходимо применить эту 'position: relative; z-index: 9; 'to. .dropdown' –

+0

Просто добавлено' .dropdown {position: relative; z-index: 9! important;} 'К сожалению, проблема все еще сохраняется. – Preben

0

От Bootstrap:

Internet Explorer 8 и 9, также поддерживаются, однако, следует помнить, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются этими браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js для поддержки поддержки медиа-запросов.

Bootstrap link

Это может быть связано с поддержкой CSS3 или в основном только что Internett explorer8 является выход из даты.

Если вам нужно исправление для IE 8 конкретно:

<!--[if IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

Норвежского использование IE 8 снижается быстро (Аллилуйя):

Browser support

У меня нет никакого способа тестирования проблемы так как у меня нет доступа к IE 8.

+0

Какой бит был бы CSS3 в ситуации OP? –

+0

Я знаю, что IE8 устарел. Но некоторые из моих клиентов должны использовать старомодный IE из-за проблем с совместимостью с другими вещами :-(Я думаю, что у меня есть все, что мне нужно в 'head', чтобы повысить совместимость с IE8. – Preben

Смежные вопросы