Загрузочный навигатор пуст на IE9

Я попытался использовать шаблон bootstrap для создания навигационной панели в моем приложении mpc aspnet.

Все отлично работает в Firefox и Chrome, но в IE мое меню прозрачно:

Я проверил, у меня есть <!DOCTYPE html> в начале моего макета. Я также пробовал <meta http-equiv="X-UA-Compatible" content="IE=edge">

Я попытался играть в меню F12 и режиме совместимости без успеха.

Любая другая подсказка?

Спасибо

Изменить: вот сгенерированный код:

            <!DOCTYPE html>

            <html lang="en">
            <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
                <title>Test &bull; Home</title>

                <link href="bootstrap.css" rel="stylesheet"/>
                <link href="bootstrap-theme.css" rel="stylesheet"/>
                <link href="toastr.css" rel="stylesheet"/>
                <script src="jquery-2.0.3.js"></script>
                <script src="jquery-ui-1.10.3.js"></script>
                <script src="angular.js"></script>
                <script src="angular-resource.js"></script>
                <script src="bootstrap.js"></script>
                <script src="toastr.js"></script>

                <!--[if lt IE 9]> HTML5Shiv
                <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]--> 

            </head>

            <body style="padding: 40px;">
                <div class="container">

            <nav class="navbar navbar-default" role="navigation">
                <ul class="nav navbar-nav">
                    <a class="navbar-brand" href="/">Test</a>
                        <li><a href="/">Home</a></li>
                            <li class="nav-divider"></li> 
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                    <li><a href="/Page1/">Page1</a></li>
                                    <li><a href="/Page2/">Page2</a></li>
                                    <li><a href="/Page3/">Page3</a></li>
                                    <li><a href="/Page4/">Page4</a></li>
                            </ul>
                        </li>
                </ul>
            </nav>
                </div>
            </body>

Ответ 1

У меня также была аналогичная проблема в IE9, когда я начал работать над новым проектом. Просмотрев раздел поддержки браузера в http://getbootstrap.com, вам нужно добавить response.js в блок кода IE, а также убедиться, что он работает от IE 9 и старше браузеры.

Итак, блок [if IE] должен выглядеть примерно так.

<!--[if lte IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
<![endif]-->

Обратите внимание на "lte" в блоке [if IE], что означает IE <= 9, тогда как "lt" означает IE < 9.

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

Обновление: Я нашел альтернативное решение проблемы. В bootstrap-theme.css используется свойство filter на navbar, которое, похоже, создает проблемы в IE9 и IE8. Поэтому вы можете просто отключить их, комментируя их. Затем выпадающее меню появится.

Ищите "фильтр" в .navbar и .navbar-inverse и отключите их. Это, конечно же, отключит градиенты для IE9 и старше.

Ответ 2

Хорошо, это не связано с JQuery Version, но с ошибкой в IE и bootstrap.theme.css.

После сравнения наших двух страниц я понял, что вы не включили этот CSS, я сузил свой поиск и наткнулся на эту проблему: https://github.com/twbs/bootstrap/issues/10257

Я прокомментировал фильтр: progid: DXImageTransform.Microsoft.gradient(startColorstr = '# ffffffff', endColorstr = '# fff8f8f8', GradientType = 0); в класс navbar, теперь он работает!

Спасибо за вашу помощь!