Свернуть Навбар в Bootstrap 3 не работает в IE8

Я создаю веб-сайт с использованием Bootstrap 3. Я следовал каждому предложению из этого вопроса - проблема IE8 с Twitter Bootstrap 3. Я включил файлы response.js и html5shiv.js, и все работает нормально, кроме navbar-collapse. Вот код navbar-collapse:

<div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#"><img src="image.png" width="143" /></a>
 </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right" id="nav-right">
            <li><a href="#">Home</a></li>
            <li><a href="#"><a>About</a></li>
        </ul>
    </div>

Заранее спасибо!

Источник

2 ответа

Мое решение похожей проблемы IE8: проблема Bootstrap IE 8, связанная с Navbar (рухнула, как мобильная версия)

Возможное исправление 1:

По сути, вам нужно избегать использования CDN для bootstrap.min.css.

Чтобы решить эту проблему, вам нужно скачать bootstrap.min.css и поместить его в подкаталог вашего приложения, как показано ниже:

/css/bootstrap/3.2.0/bootstrap.min.css

Связанное изменение в коде:

Если вы используете bootstrap.min.css из CDN, как указано ниже,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

затем замените приведенный выше код локальной версией bootstrap.min.css, как показано ниже:

<link rel="stylesheet" href="./css/bootstrap/3.2.0/bootstrap.min.css">

Возможное решение 2:

Подобная проблема IE8 все еще может возникнуть, если вы пытаетесь запустить HTML-файл, хранящийся на локальном компьютере. Запуск html-файла с веб-сервера решит проблему. Подробное решение приведено в приведенном выше сообщении в блоге.

Источник

В основном проблема возникает из-за того, что мы включаем или вызываем компоненты начальной загрузки, т.е. различные файлы java-scripts таблиц стилей. Согласно моему опыту, когда мы включаем больше файлов начальной загрузки, чем это необходимо, это вызывает конфликт. Я сам вчера сделал эту панель навигации и имел проблема. Решения могут быть:

 1.Don't include unnecessary files,brings conflict.
 2.always keep the jquery file above bootstrap.js file
 3.Use the latest version as far as it is reachable to you.

Я сделал то же самое вчера. Вот мой полный код: это делается в ASP.NET с использованием Visual Studio 10.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="nav.aspx.cs" Inherits="nav" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
<div>

<nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">toggle</span>
            <span class="icon-bar"></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>
    <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav">
            <li><a href="">helo</a></li>
            <li><a href="">by</a></li>
            <li><a href="">hy</a></li>
        </ul>
    </div>
    </nav>
</div>
</form>

Источник
Другие вопросы по тегам