我正在使用Twitter Bootstrap 3 RC2在我的页面顶部创建一个导航栏,除IE8之外,它的工作正常.
在IE8的行为就好像浏览器变小,使菜单崩溃为移动视图.但事实并非如此.
现在我知道TB3还在进行中.但是我想知道有没有人在这里有一个解决方案.
如果你想检查我的问题与IE8,那么看这里:
http://jsfiddle.net/DnwJN/embedded/result/
(你需要直接链接,因为JSFiddle自己不能用IE8)
这里是JSFiddle:
您会看到导航栏在其他浏览器中都可以正常工作.甚至IE9.但不是IE8.而TB3支持IE8.他们只支持IE7及以下版本.
任何人都有解决这个问题的办法吗?
小提琴的代码
<nav class="navbar" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Title</a> </div> <!-- Collect the nav links,forms,and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav>
解决方法
希望这可以帮助…
从http://getbootstrap.com/getting-started/:
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) --> <script src="js/respond.js"></script> </body>