Problème IE8 avec Twitter Bootstrap 3

Je crée un site en utilisant le nouveau Twitter Bootstrap. Le site a l'air bien et fonctionne dans tous les navigateurs requis sauf IE8.

Dans IE8, il semble afficher des éléments de la version mobile mais s'étendant sur tout l'écran de mon bureau. Je crois que le problème que j'ai, c'est que le bootstrap Twitter est d'abord mobile. Donc, pour une raison quelconque, IE8 opte pour cette option.

Je remarque également que la containerclasse ne semble pas tirer les propriétés CSS de largeur maximale comme prévu. Quelqu'un peut-il voir ce que j'ai fait de mal?

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

Vous avez obtenu votre CSS de CDN (bootstrapcdn.com) respond.js ne fonctionne que pour les fichiers locaux. Essayez donc votre site Web sur IE8 avec une copie locale de bootstrap.css. Ou lisez: CDN / X-Domain Setup

Remarque Voir également: https://github.com/scottjehl/Respond/pull/206

Mettre à jour:

Veuillez lire: http://getbootstrap.com/getting-started/#support

De plus, Internet Explorer 8 nécessite l'utilisation de respond.js pour activer la prise en charge des requêtes multimédias.

Voir aussi: https://github.com/scottjehl/Respond

Pour cette raison, le modèle de base contient ces lignes dans la section head:

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

J'ai également dû définir la balise META suivante:

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

J'ai eu ce même problème lors de la transition de Bootstrap 2 à 3. J'avais déjà obtenu respond.js et html5shiv.js et mis ma méta à bord. J'avais manqué que de 2 à 3 le type d'élément navbar avait changé. Dans Bootstrap 2, c'était nav. Dans Bootstrap 3, c'est maintenant l'en-tête. Donc, pour résoudre complètement le problème, je devais

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

Mettez cela juste après avoir chargé mon css:

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

puis changer

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

à

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

Oh et pour faire bonne mesure, j'ai également ajouté

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

simplement parce que c'est ce que le site Bootstrap lui-même a.

Dans mon cas, le CSS bootstrap minifié était à l'origine du problème. Pour rendre bootstrap 3.0.2 réactif dans IE8 (émulé à l'aide des outils de développement F12), j'ai dû:

1 - Définissez le drapeau compatible X-UA.

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

2 - Utilisez le bootstrap.css non minifié, au lieu de bootstrap.min.css

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

3 - Ajoutez le respond.js (et html5shiv.js)

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

mettre respond.jsen bas de page mais avant de fermer la bodybalise et voici le lien de respond.jset exécuter ce code dans votre localhost.

https://github.com/scottjehl/Respond

Au cas où. Assurez-vous de charger les fichiers js spécifiques à IE après avoir chargé vos fichiers css.

N'oubliez pas de placer vos liens css dans le <head>car respond.jsne prend que ceux-ci.

Comme indiqué précédemment, il existe deux problèmes différents: 1) IE8 ne prend pas en charge les requêtes multimédias 2) respond.js utilisé conjointement avec les fichiers css interdomaines doit être inclus comme décrit précédemment.

Si vous souhaitez utiliser BootstrapCDN, voici un exemple de travail:

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

Assurez-vous également de copier respond.proxy.gif, respond.min.js et response.proxy.js dans les répertoires locaux

Après avoir vérifié:

• DOCTYPE
• Balise META compatible X-UA
• Inclusion de html5shiv.js et respond.js (et téléchargement des dernières versions)
• respond.js étant local
• Hébergement du site depuis un serveur web et non depuis File: //
• Ne pas utiliser @import
• ...

Col-lg, col-md et col-sm ne fonctionnaient toujours pas. Enfin, j'ai déplacé les références à bootstrap avant les références à html5shiv.js et respond.js et tout a fonctionné.

Voici un extrait:

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

D'après l'explication, il est dit que IE8 est la version standard pour vous et faire content="IE=edge"affichera la page dans le mode le plus élevé. Pour le rendre compatible, changez-le en content="IE=8".

Le mode IE8 prend en charge de nombreuses normes établies, notamment la spécification W3C Cascading Style Sheets Level 2.1 et l'API W3C Selectors; il fournit également un support limité pour la spécification de niveau 3 des feuilles de style en cascade du W3C (document de travail) et d'autres normes émergentes.

Le mode Edge indique à Internet Explorer d'afficher le contenu dans le mode le plus élevé disponible. Avec Internet Explorer 9, cela équivaut au mode IE9. Si une future version d'Internet Explorer prend en charge un mode de compatibilité plus élevé, les pages définies en mode Edge apparaissent dans le mode le plus élevé pris en charge par cette version. Ces mêmes pages apparaissent toujours en mode IE9 lorsqu'elles sont affichées avec Internet Explorer 9.

Référence Que fait <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

Nécessaire à ajouter - <meta http-equiv="X-UA-Compatible" content="IE=edge">

J'utilisais Bootstrap 3 - le faisait fonctionner sur IE sur mon local.

Je l'ai mis en direct ne fonctionnait pas dans IE.

Just Bootstrap n'inclut pas cette ligne de code dans leurs modèles, je ne sais pas pourquoi, mais cela pourrait être dû au fait qu'il n'est pas compatible W3C.

J'ai un correctif pour ce problème. En fait, IE7 et 8 ne prennent pas correctement en charge @media et si vous vérifiez le css pour les classes «col-md- *» et que la largeur est indiquée en largeur de média 992px. Créez simplement un nouveau fichier css IE par exemple: IE.css et ajoutez les commentaires conditionnels. Et puis copiez simplement les classes requises pour votre conception directement avec toutes les requêtes multimédias et vous avez terminé.

J'ai eu exactement le même problème lors de la migration de bootstrapv2 vers la v3.

Si (comme moi) vous avez migré en remplaçant l'ancien spanX par col-sm-X, vous devez également ajouter des classes col-X. col-X sont les styles qui sont en dehors de tous les blocs @media afin qu'ils fonctionnent sans prise en charge des requêtes multimédias.

Pour fixer la largeur du conteneur, vous pouvez la définir vous-même en dehors d'un bloc @media. Quelque chose comme:

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

J'ai rencontré le même problème dans IE 10.0. Je sais que ce n'est pas exactement le problème dans le PO, mais ce sera peut-être utile pour d'autres.

Dans mon cas, j'avais une ligne vide au début du document:

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

Si la ligne vierge se trouve entre le DOCTYPE et la balise, le problème est également affiché:

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

Une fois que j'ai supprimé la ligne vierge, et sans la méta magique compatible X-UA, IE 10 a commencé à rendre le site correctement.

Si vous utilisez PHP et Smarty, soyez prudent avec vos commentaires Smarty car ils ajouteront ces lignes vierges problématiques :-)

mon étiquette de tête est comme ceci:

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

si vous voulez essayer en local ... essayez via localhost, ou créez un serveur QA et définissez le contenu et essayez.

Nous avons besoin de respond.js pour le bootstrap 3 et cela ne fonctionnera pas sur la machine locale si nous le mettons simplement dans js et l'ajoutons à html dans l'en-tête. Il dira que l'accès est refusé. cela ne fonctionne que via le serveur car IE a une restriction de sécurité. : P

J'ai lu tous les commentaires ici, j'ai tout essayé .. mais je n'ai pas pu le faire fonctionner avec Windows 7 - Internet Explorer 11 ( avec le mode document: IE8 ).

Ensuite, il m'est venu à l'esprit que l'exécution d'un mode document (IE8) n'est pas la même chose que le vrai IE8, j'ai donc installé Windows Virtual PC ( Windows 7 avec Internet Explorer 8 ) et tadaaaa ... cela fonctionne comme un charme!

J'ai mis ce morceau de code JUSTE en bas de la page pour le faire fonctionner:

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

Tout comme un avertissement. J'ai eu le même problème et rien de ce qui précède ne l'a résolu pour moi. Finalement, j'ai découvert que respond.js n'analysait pas le CSS référencé via @import . J'ai fait bootstrap.min.cssimporter le tout via @importmon main.css.

Assurez-vous donc que vous n'avez pas de CSS contenant vos requêtes multimédias référencées via @import .

J'ai résolu les étapes ci-dessous.

(1) installé le module Respond.js pour drupal 7. (2) module lessphp pour drupal 7 défini dans les bibliothèques, au lieu du dossier du module. (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]-->  

en utilisant cdn bootstrap à partir du réglage du thème.

Pour en savoir plus, consultez mon blog de site Web pour la conception et le développement de drupal www.devangsolanki.com

Si vous utilisez Bootstrap 3 et que tout fonctionne correctement sur d'autres navigateurs à l'exception d'IE, essayez ce qui suit.

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

Utilisez cette solution

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

Cette chaîne <script src="js/css3-mediaqueries.js"></script>active les mediaqueries. Cette chaîne <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />active les polices d'amorçage.

Testé sur Bootstrap 3.3.5

Lien pour télécharger mediaqieries.js . Lien pour télécharger bootstrap-ie7.css

Assurez-vous de lier la source d'amorçage séparément

Si vous utilisez LESSou SASSne soyez pas trop gourmand avec la compilation des styles. Dans mon projet, j'ai inclus bootstrap.min.cssdans mon style principal, en haut du fichier - il ne devrait donc y avoir qu'une seule demande pour tous les styles.

Et à cause de cela, les classes boostrap ne fonctionnaient pas correctement. Lorsqu'il est ajouté séparément, fonctionne comme prévu.

J'ai fait face au même problème, j'ai essayé la première réponse mais quelque chose manquait.

Si vous utilisez Webpack, votre css sera chargé comme une balise de style qui n'est pas prise en charge par respond.js, il a besoin d'un fichier, alors assurez-vous que le bootstrap est chargé en tant que fichier css

Personnellement j'ai utilisé 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")
            }
        ]
    }
}

J'espère que cela vous aidera