14

我正在使用 Twitter Bootstrap 3 RC2 在我的页面顶部创建一个导航栏，除了在 IE8 中工作正常。

在 IE8 中，就像浏览器变小一样，移动视图的菜单折叠起来。但这种情况并非如此。

现在我知道 TB3 仍在进行中。但我想知道是否有人在这里有解决方案。

如果你想检查我的 IE8 问题，请看这里：

http://jsfiddle.net/DnwJN/embedded/result/

（您需要直接链接，因为它本身的 JSFiddle 不适用于 IE8）

这是 JSFiddle：

http://jsfiddle.net/DnwJN/

您会看到导航栏在所有其他浏览器中都能正常工作。甚至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>
4

10 回答 10

14

希望这可以帮助...

从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>
于 2013-08-17T18:23:46.333 回答
8

另外，请注意您必须包含以下代码：

<!--[if lt IE 9]>
  <script src="${rc.getContextPath()}/js/vendor/html5shiv.js"></script>
  <script src="${rc.getContextPath()}/js/vendor/respond.min.js"></script>
<![endif]-->

在包含所有 css 以使其正常工作之后。

于 2013-10-26T11:33:44.893 回答
6

添加 html5shim 后，我仍然遇到 ie8 中的下拉菜单问题。
发现这篇文章https://github.com/twbs/bootstrap/issues/6548解释了过滤器正在阻碍。bootstrap 在导航栏上有一个默认过滤器，因此您必须清除它。这对我有用。

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav
li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav    
li.dropdown.open.active>.dropdown-toggle,
.navbar, .navbar-inverse .navbar-inner {
    background-color: #15317E;
    border-color: #252525;
    filter:none;
    background-image: none;
}
于 2013-08-27T05:34:55.090 回答
4

Vanilla Bootstrap 3 uses jQuery 2 by default. So in order to get it working in IE8, you have to change jQuery version to less than jQuery 2.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Include these two scripts:

<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>

Most importantly, use a web server to view your site (with http:// or https:// protocol, as file:// protocol would break respond.js' execution).

于 2014-09-17T07:11:02.687 回答
1

尝试添加

<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

到您的代码并检查或使用modernizer.js 或 normalizer.js。还要检查http://getbootstrap.com/getting-started/#browsers，它说要包含 respond.js 以启用媒体查询支持。

于 2013-08-17T10:25:14.827 回答
1

对我来说，这是我的 jquery 版本。jQuery 2.0.2 在 IE8 中不能很好地与 bootstrap 3 一起工作，但 jQuery 1.9.1 工作得很好。没有用 jQuery 1.10.1 测试它。切换 jQuery 的版本，看看是否有效

于 2013-12-19T15:55:46.360 回答
0

主要检查 meta http-equiv 标签，如果它不包含在你的文件中，添加这个

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

bootstrap3 与 ie 8 一起工作正常，只有你确保添加 respond.js ， html5shiv 。

像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->
于 2013-10-17T09:40:50.260 回答
0

嘿使用modernizr js，因为i8和更早的版本不支持bar，因为它使用html5。为此使用modernizer js。:)

现代化者

于 2013-08-17T09:19:15.143 回答
0

此外，您需要确保您的 CSS 包含在 via<link>而不是@import

于 2013-11-18T22:44:07.963 回答
0

现在，在 2017 年，我刚刚发现一些东西表明上面的各种响应——涉及 html5shiv、respond.js 和 jquery<2.0——都是必要的。

是这样的：在这里转到最新的 Bootstrap（现在是 3.3.7），然后向下滚动到示例集合，然后单击左侧的第一个“Navbars in action”。您会发现下拉菜单项有效。

现在看一下页面源。在底部，你看到了什么？你看到jquery 1.12.4，这就是你看到的......不是最新的3+。

您可以搜索“jquery drop support for ie8”以查看众多公告。

于 2017-03-01T04:04:33.783 回答