Question

我尝试使用bootstrap模板在我的aspnet mvc应用程序上生成导航栏。

在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>

Answer 1

我在IE9中遇到了类似的问题，因为我开始研究一个新项目。查看http://getbootstrap.com中的浏览器支持部分，您需要在IE代码块中添加respond.js，并且还需要确保它可以在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]-->

注意[if IE]块中的“lte”，这意味着IE＆lt; = 9，而“lt”意味着IE＆lt; 9。

希望这有帮助。

更新：我找到了另一种解决方案。 bootstrap-theme.css在导航栏上使用了filter属性，似乎在IE9和IE8上出现了问题。所以你可以通过评论它们来禁用它们。然后会出现下拉菜单。

在.navbar＆amp;中寻找'过滤器'。 .navbar-inverse并禁用它们。这将取消IE9及更早版本的渐变。

Answer 2

好吧它与Jquery版本无关，但与IE和bootstrap.theme.css中的错误有关。

在比较了我们的两个页面之后，我意识到你没有包含那个CSS，我缩小了搜索范围并偶然发现了这个问题：https://github.com/twbs/bootstrap/issues/10257

我评论过滤器：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffffff'，endColorstr ='＃fff8f8f8'，GradientType = 0）;进入navbar类，现在可以了！

感谢您的帮助！

IE9上的Bootstrap导航栏为空

2 个答案: