2015-05-21 3 views
1

Я разрабатываю и интранет-приложение с помощью ASP.NET для своей компании. это приложение будет работать только локально.Bootstrap Отзывчивый Navbar показывается, но рухнул с любой разрешающей способностью в IE8

Я использую Bootstrap 3.

навигационная панель отлично работает на IE9 и выше. Но когда я тестирую его на IE8, он отображается как сбой (показывая меню гамбургера вместо обычного меню). Не имеет значения, как я изменяю размер браузера, там расположено меню гамбургеров.

Я уже сделал все рекомендованные шаги по Bootstrap и я использую Response.js

Я даже построил сайт образца только с помощью шаблона из Bootstrap и я локально скачал все файлы на веб-сайте. еще, такой же проблема.

здесь образец:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="js/html5shiv.min.js"></script> 
     <script src="js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <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="#">Brand</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
        <li><a href="#">Link</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
          <li class="divider"></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" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 



    <h1>Hello, world!</h1> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html> 

что я здесь делаю неправильно?

это имеет какое-то отношение ко мне, находясь за брандмауэром в моей компании?

+0

не связано с моей проблемой. он спрашивает о Bootstrap 2, и я спрашиваю о 3. Также у него другая проблема, чем у меня. – Yousi

+0

Затем укажите свой код? Или дайте нам скрипку/codepen/etc, которая точно повторит проблему. – codyogden

+0

уверен. Я отправлю пример кода, который я попробовал. ожидая вашей помощи. кажется, что вы эксперт :) – Yousi

ответ

2

Для поддержки медиа-запросов в IE8 вам необходимо использовать Respond.js, который позволит работать с медиа-запросами.

Repo: https://github.com/scottjehl/Respond

+0

спасибо за ответ Glen. Однако, если вы читаете мой пост, я уже включил ответ на мою страницу, и все файлы являются локальными. – Yousi

+0

Вы уверены, что соблюдали инструкции, изложенные в ответном JS? Вы должны убедиться, что RespondJS вызывается ПОСЛЕ загрузки CSS. Чем ближе, тем лучше. – Glen

+0

MAN !!! О, МОЙ БОГ ! ты звезда !!! как я мог пропустить это! Я серьезно не знаю, как поблагодарить вас. вы только что сохранили мой проект :) .. – Yousi

0

Bootstrap 3 является «мобильным первым», что означает, что «мобильный» макет является макетом по умолчанию без применения медиа-запросов. По мере того, как экран получает большие медиа-запросы, применяются для изменения макета для этих размеров.

IE8, который не поддерживает медиа-запросы, всегда будет показывать мобильный макет. Это то, что ожидается при использовании Bootstrap 3 в IE8.

+0

Bootstrap поддерживает IE8 +. И с помощью Respond.js вы должны хорошо отображать веб-сайт на IE8. Моя проблема в том, что Respond. не работает для меня, и меню отображается как мобильное меню – Yousi

0

Убедитесь, что вы не используете его на месте. coz response.js не будет работать, если вы используете его локально в браузере. как файл: // что-то/nameofthefile

запустить его в локальном хосте или на FTP-сервере

Смежные вопросы