Проблема IE8 с Twitter Bootstrap 3

Я создаю сайт, используя новый Bootstrap Twitter. Сайт отлично выглядит и работает во всех необходимых браузерах, кроме IE8.

В IE8 он, похоже, отображает элементы мобильной версии, но растягивается по всему экрану моего рабочего стола. Я считаю, что проблема, с которой я столкнулась, заключается в том, что загрузочный лоток Twitter сначала мобилен. Поэтому по какой-то причине IE8 собирается для этого варианта.

Я также замечаю, что класс container, по-видимому, не тянет в свойствах максимальной ширины CSS, как предполагалось. Может ли кто-нибудь увидеть, что я сделал неправильно?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">


<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

Ответы

Ответ 1

Вы получили свой CSS от CDN (bootstrapcdn.com). response.js работает только для локальных файлов. Поэтому попробуйте свой веб-сайт на IE8 с локальной копией bootstrap.css. Или читайте: Настройка CDN/X-домена

Примечание См. также: https://github.com/scottjehl/Respond/pull/206

Update:

Пожалуйста, прочитайте: http://getbootstrap.com/getting-started/#support

Кроме того, Internet Explorer 8 требует использования response.js для поддержки поддержки медиа-запросов.

Смотрите также: https://github.com/scottjehl/Respond

По этой причине основной шаблон содержит эти строки в разделе главы:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Ответ 2

Мне также пришлось установить следующий тег META:

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

Ответ 3

У меня возникла такая же проблема при переходе с Bootstrap 2 на 3. У меня уже были answer.js и html5shiv.js, и я поставил свою мета на край. Я пропустил это от 2 до 3, тип элемента навигационной панели изменился. В Bootstrap 2 это был nav. В Bootstrap 3 теперь заголовок. Чтобы полностью решить проблему, я должен был

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

Положите это сразу после загрузки моего css:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

а затем измените

<nav class="navbar" role="navigation">
</nav>

к

<header class="navbar" role="navigation">
</header>

О, и для хорошей меры я также добавил

<meta name="viewport" content="width=device-width, initial-scale=1.0">

просто потому, что сам сайт Bootstrap имеет.

Ответ 4

В моем случае ошибка, вызванная бутстрапом, вызвала проблему. Чтобы сделать bootstrap 3.0.2 отзывчивым в IE8 (эмулированный с помощью инструментов разработчика F12), мне пришлось:

1 - Установите флаг X-UA-Compatible.

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

2 - используйте notminified bootstrap.css вместо bootstrap.min.css

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

3 - Добавьте response.js(и html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

Ответ 5

поместите respond.js в нижней части страницы, но перед закрытием тега body и вот ссылка respond.js и запустите этот код в своем локальном хосте.

https://github.com/scottjehl/Respond

Ответ 6

На всякий случай. Убедитесь, что вы загрузите специфические js файлы IE после загрузки ваших файлов css.

Ответ 7

Не забудьте поместить ваши ссылки css в <head>, поскольку respond.js принимает только те.

Ответ 8

Как было сказано ранее, существуют две разные проблемы: 1) IE8 не поддерживает медиа-запросы 2) response.js, используемый в сочетании с междоменными css файлами, должен быть включен, как описано ранее.

Если вы хотите использовать BootstrapCDN здесь рабочий пример:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Также обязательно скопируйте response.proxy.gif, reply.min.js и response.proxy.js в локальных каталогах

Ответ 9

После проверки:

  • DOCTYPE
  • X-UA-совместимый метатег
  • Включение html5shiv.js и response.js(и загрузка последних версий)
  • response.js является локальным
  • Хостинг сайта с веб-сервера, а не из файла://
  • Не использовать @import
  • ...

Все еще col-lg, col-md и col-sm не работали. Наконец, я переместил ссылки на бутстрап, чтобы быть перед ссылками на html5shiv.js и response.js, и все это сработало.

Вот фрагмент:

<!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" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

Ответ 10

Необходимо добавить - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Я использовал Bootstrap 3 - работал ли он над IE на моем локальном компьютере.

Я сказал, что он не работает в IE.

Just Bootstrap не включает эту строку кода в свои шаблоны, я не уверен, почему, но это может быть связано с тем, что она не совместима с W3C.

Ответ 11

Из объяснения говорится, что IE8 является стандартной версией для вас, а content="IE=edge" отобразит страницу в самом высоком режиме. Чтобы сделать его совместимым, измените его на content="IE=8".

Режим IE8 поддерживает множество установленных стандартов, в том числе спецификации каскадных таблиц стилей W3C уровня 2.1 и API-интерфейсы W3C; он также обеспечивает ограниченную поддержку каскадных таблиц стилей W3C уровня 3 (рабочий проект) и других новых стандартов.

Режим Edge указывает Internet Explorer отображать содержимое в доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если будущий выпуск Internet Explorer поддерживает более высокий режим совместимости, страницы, установленные в режиме edge, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Те же самые страницы будут отображаться в режиме IE9 при просмотре в Internet Explorer 9.

Ссылка Что такое < meta http-equiv = "X-UA-Compatible" content= &quot, IE = край " > делать?

Ответ 12

У меня есть исправление для этой проблемы. На самом деле IE7 и 8 не поддерживают @media правильно, и если вы проверите css для классов "col-md- *", и ширина будет указана в ширине носителя 992px. Просто создайте новый css файл IE, например: IE.css, и добавьте условные комментарии. А затем просто скопируйте классы, необходимые для вашего дизайна, непосредственно с любыми запросами на медиа-носители, и вы закончили.

Ответ 13

У меня была точно такая же проблема при переходе с bootstrapv2 на v3.

Если (как я) вы перенести, заменив старый spanX на col-sm-X, вам также нужно добавить классы col-X. col-X - это стили, которые находятся вне любых блоков @media, поэтому они работают без поддержки медиа-запросов.

Чтобы исправить ширину контейнера, вы можете установить ее вне блока @media. Что-то вроде:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

Ответ 14

У меня такая же проблема в IE 10.0. Я знаю, что это не совсем проблема в OP, но, возможно, это будет полезно для других.

В моем случае у меня была пустая строка в начале документа:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

Если пустая строка находится между DOCTYPE и тегом, проблема также отображается:

<!DOCTYPE html>
[blank line]
<html lang="es">

Как только я удалил пустую строку и без волшебной X-UA-совместимой мета, IE 10 начал правильно отображать сайт.

Если вы используете PHP и Smarty, будьте осторожны с комментариями Smarty, потому что они добавят эти проблемные пустые строки: -)

Ответ 15

мой тег заголовка выглядит следующим образом:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

если вы хотите попробовать локально... попробуйте через localhost или создайте сервер QA и настройте контент и попробуйте.

Нам нужен response.js для bootstrap 3, и он не будет работать на локальной машине, если мы просто поместим его в js и добавим его в html в заголовке. Он скажет, что доступ запрещен. он работает только через сервер, поскольку IE имеет ограничение безопасности.: P

Ответ 16

Я прочитал каждый комментарий здесь, попробовал все.. но не смог заставить его работать с Windows 7 - Internet Explorer 11 (с режимом документа: IE8).

Затем пришло в голову, что запуск режима документа (IE8) не совпадает с реальным IE8, поэтому я установил Windows Virtual PC (Windows 7 с Internet Explorer 8) и tadaaaa... он работает как шарм!

Я поставил этот фрагмент кода JUST в нижней части страницы, чтобы он работал:

<!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Ответ 17

Если вы используете Bootstrap 3, и все работает отлично в других браузерах, кроме IE, попробуйте ниже.

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

<!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Ответ 18

Так же, как хедз-ап. У меня была та же проблема, и ни одна из вышеперечисленных не исправила это для меня. В конце концов я узнал, что response.js не анализирует CSS, на который ссылается @import. У меня было все bootstrap.min.css импортировано через @import в мой main.css.

Поэтому убедитесь, что у вас нет CSS, который содержит ваши медиа-запросы, на которые ссылаются через @import.

Ответ 19

Я решил выполнить следующие шаги.

(1) установлен модуль Respond.js для drupal 7. (2) модуль lessphp для drupal 7, установленный в библиотеках, а не в папке с модулем. (3) (3.1) <meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

используя cdn bootstrap из настройки темы.

Чтобы узнать больше, просмотрите мой блог на сайте для дизайна и развития drupal www.devangsolanki.com

Ответ 20

Используйте это решение

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

Эта строка <script src="js/css3-mediaqueries.js"></script> включает медиа-запросы. Эта строка <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> включает бутстрап-шрифты.

Проверено на Bootstrap 3.3.5

Ссылка на скачивание mediaqieries.js. Ссылка для скачивания bootstrap-ie7.css

Ответ 21

Убедитесь, что вы связали источник начальной загрузки

Если вы используете LESS или SASS, не следует жадно компилировать стили. В моем проекте я включил bootstrap.min.css в мой основной стиль, в верхней части файла, поэтому должен быть только один запрос для всех стилей.

И из-за этого классы boostrap не работали должным образом. При добавлении отдельно, работает как ожидалось.

Ответ 22

Я столкнулся с той же проблемой, попробовал первый ответ, но чего-то не хватало.

Если вы, ребята, используете Webpack, ваш css будет загружен как тег стиля, который не поддерживается response.js, ему нужен файл, поэтому убедитесь, что bootstrap загружен как файл css

Лично я использовал extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Надеюсь, это поможет вам.