IE9上的Bootstrap导航栏为空

Question

IE9上的Bootstrap导航栏为空

Rod*_*eck 10 internet-explorer-9 twitter-bootstrap

我尝试使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ahm*_*bid 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]-->

Run Code Online (Sandbox Code Playgroud)

注意[if IE]块中的"lte",这意味着IE <= 9,而"lt"意味着IE <9.

希望这可以帮助.

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

在.navbar&.navbar-inverse中查找"过滤器"并禁用它们.这将取消IE9及更早版本的渐变.

应该促进"更新"的答案; 它完美地运作.更详细地说,我在链接bootstrap 3.0 css/js之后添加以下内容.<style type ="text/css"> .navbar {filter:none!important; 保存我的一天.</ style> (2认同)

归档时间：	13 年前
查看次数：	10207 次
最近记录：	12 年，2 月前