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 に答える
4

Vanilla Bootstrap 3 はデフォルトで jQuery 2 を使用します。したがって、IE8 で動作させるには、jQuery のバージョンを jQuery 2 未満に変更する必要があります。

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

次の 2 つのスクリプトを含めます。

<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>

最も重要なことは、Web サーバーを使用してサイトを表示することです (http:// または https:// プロトコルを使用します。file:// プロトコルは、respond.js の実行を中断します)。

于 2014-09-17T07:11:02.687 に答える
1

私にとって、それは私のバージョンのjqueryでした。jQuery 2.0.2 は IE8 のブートストラップ 3 ではうまく動作しませんでしたが、jQuery 1.9.1 は完全に動作しました。jQuery 1.10.1 ではテストしていません。jQuery のバージョンを切り替えて、それが機能するかどうかを確認します

于 2013-12-19T15:55:46.360 に答える
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 に答える
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

また、CSS が含まれていることを確認する必要があります<link>。@import

于 2013-11-18T22:44:07.963 に答える
0

i8以前のバージョンはhtml5を使用しているためバーをサポートしていないため、modernizr jsを使用してください。そのためにはmodernizer jsを使用してください。:)

モダナイザー

于 2013-08-17T09:19:15.143 に答える