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

Я создаю сайт, используя новый Twitter Bootstrap. Сайт выглядит нормально и работает во всех необходимых браузерах, кроме 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>

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

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

Обновить:

Пожалуйста, прочитайте: 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]-->

Я также должен был установить следующий тег META:

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

У меня была такая же проблема при переходе с Bootstrap 2 на 3. Я уже получил response.js и html5shiv.js и установил мета в край. Я пропустил, что от 2 до 3 изменился тип элемента navbar. В 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.

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

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

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

2 - использовать не минимизированный 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]-->

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

https://github.com/scottjehl/Respond

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

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

Как указывалось ранее, есть две разные проблемы: 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="https://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, response.min.js и response.proxy.js в локальные каталоги

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

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

Все еще col-lg, col-md и col-sm не работали. Наконец, я переместил ссылки на bootstrap до ссылок на 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>

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

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

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

Ссылка Что делает <meta http-equ = "X-UA-Compatible" content = "IE = edge">?

Нужно добавить - <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

Я положил это вживую не работает в IE.

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

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

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

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

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

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

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

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

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

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

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

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

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

моя голова тег выглядит так:

<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 для начальной загрузки 3, и он не будет работать на локальной машине, если мы просто поместим его в js и добавим его в html в заголовке. Будет сказано, что доступ запрещен. он работает только через сервер, так как IE имеет ограничение безопасности. :П

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

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

Я поместил этот кусок кода просто внизу страницы, чтобы он работал:

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

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

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

Я решил следующие шаги.

(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 из настроек темы.

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

Если вы используете 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]-->

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

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

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

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

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

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

Если вы, ребята, используете 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")
            }
        ]
    }
}

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