twitter-bootstrap – 引导栏在IE9上为空

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

解决方法

我也在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在navbar上使用过滤器属性,这似乎在IE9和IE8上出现问题.所以你可以通过评论他们来禁用它们.然后会出现下拉菜单. 在.navbar& …中查找’filter’ .navbar-inverse并禁用它们.这将会导致IE9及更早版本的梯度关闭.

twitter-bootstrap – 引导栏在IE9上为空

解决方法

猜你在找的Bootstrap相关文章