Випуск 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) respo.js працює лише для локальних файлів. Тому спробуйте свій веб-сайт на IE8 з локальною копією bootstrap.css. Або прочитайте: Настроювання домену CDN / X

Примітка Дивіться також: https://github.com/scottjehl/Respond/pull/206

Оновлення:

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

Крім того, Internet Explorer 8 вимагає використання respo.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. Я вже отримав respo.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.

У моєму випадку виникнення проблеми із мінімізованим CSS у завантажувальній системі. Щоб зробити bootstrap 3.0.2 чутливим в IE8 (емулюється за допомогою інструментів для розробників F12), я повинен був:

1 - Встановіть прапор X-UA-сумісний.

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

2 - Використовуйте не мінімізований bootstrap.css, а не bootstrap.min.css

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

3 - Додайте Respo.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та запустіть цей код у вашому localhost.

https://github.com/scottjehl/Respond

Про всяк випадок. Переконайтесь, що ви завантажуєте файли js, що належать до IE, після завантаження файлів css.

Не забувайте розміщувати свої css-посилання у тому <head>, що respond.jsзаймає лише те.

Як було сказано раніше, існують дві різні проблеми: 1) IE8 не підтримує медіа-запити;

Якщо ви хочете використовувати BootstrapCDN, ось робочий приклад:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//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]-->

Також обов’язково скопіюйте respo.proxy.gif, respo.min.js та response.proxy.js у локальні каталоги

Після перевірки:

• ДОКТИП
• X-UA-Сумісний метатег
• Включення html5shiv.js та respo.js (та завантаження останніх версій)
• відповідь.js місцева
• Хостинг сайту з веб-сервера, а не з файлу: //
• Не використовується @import
• ...

Ще не працювали col-lg, col-md та col-sm. Нарешті я перемістив посилання на bootstrap, щоб вони були до посилань на html5shiv.js і respo.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; вона також надає обмежену підтримку специфікацій каскадних таблиць стилів W3C рівня 3 (робочий проект) та інших нових стандартів.

Режим Edge повідомляє Internet Explorer відображати вміст у найвищому доступному режимі. У Internet Explorer 9 це еквівалентно режиму IE9. Якщо в майбутньому випуску Internet Explorer підтримується більш високий режим сумісності, сторінки, встановлені в крайовому режимі, відображатимуться у найвищому режимі, підтримуваному цією версією. Ці самі сторінки все одно з'являтимуться в режимі IE9 під час перегляду в Internet Explorer 9.

Довідка Що робить <meta http-equiv = "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-сумісного 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 для bootstrap 3, і він не буде працювати на локальній машині, якщо ми просто помістимо його у js та додамо його до html у заголовку. Він скаже, що в доступі заборонено. він працює лише через сервер, оскільки IE має обмеження безпеки. : P

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

Тоді прийшло в голову, що запуск документа (IE8) не такий, як реальний IE8, тому я встановив віртуальний ПК Windows ( Windows 7 з Internet Explorer 8 ) і тадаааа ... це працює як шарм!

Я поставив цей фрагмент коду ВСІМ внизу сторінки, щоб він працював:

<!-- 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у свій основний стиль у верхній частині файлу - тому для всіх стилів повинен бути лише один запит.

І через це заняття з завантаження не працювали належним чином. Якщо додано окремо, працює як очікувалося.

Я зіткнувся з тією ж проблемою, спробував першу відповідь, але чогось не було.

Якщо ви, хлопці, використовуєте Webpack, ваш css буде завантажений як тег стилю, який не підтримується respo.js, йому потрібен файл, тому переконайтеся, що завантажувальний файл завантажений як файл 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")
            }
        ]
    }
}

Сподіваюся, це допоможе вам