10

我尝试使用引导模板在我的 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>
4

2 回答 2

15

当我开始从事一个新项目时，我在 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 <= 9，而“lt”表示 IE < 9。

希望这可以帮助。

更新：我找到了解决您问题的替代方案。bootstrap-theme.css 在导航栏上使用了过滤器属性，这似乎在 IE9 和 IE8 上产生了问题。因此，您可以通过将它们注释掉来禁用它们。然后会出现下拉菜单。

在 .navbar 和 .navbar-inverse 中查找“过滤器”并禁用它们。这当然会关闭 IE9 和更早版本的渐变。

于 2013-09-22T08:33:51.870 回答
0

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

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

我评论了过滤器： progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); 进入导航栏类，现在可以了！

谢谢你的帮助 ！

于 2013-09-24T13:44:22.923 回答