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’étendre sur tout l’écran de mon bureau. Je crois que le problème que je rencontre est que Twitter bootstrap _ est d'abord mobile. Donc pour une raison quelconque, IE8 choisit cette option.
Je remarque également que la classe container ne semble pas extraire les propriétés CSS de largeur maximale comme prévu. Quelqu'un peut-il voir ce que j'ai mal fait?
<!-- 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"> </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"> </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"> </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"> </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"> </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"> </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: configuration du CDN/X-Domain
Remarque Voir aussi: https://github.com/scottjehl/Respond/pull/206
Mise à jour:
Veuillez lire: http://getbootstrap.com/getting-started/#support
En outre, Internet Explorer 8 requiert l'utilisation de respond.js pour activer la prise en charge des requêtes multimédia.
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 le tag META suivant:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
J'ai eu le même problème lors de la transition de Bootstrap 2 à 3. J'avais déjà obtenu respond.js et html5shiv.js et défini ma méta sur Edge. J'avais raté 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 ceci 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]-->
et ensuite changer
<nav class="navbar" role="navigation">
</nav>
à
<header class="navbar" role="navigation">
</header>
Oh et pour faire bonne mesure, j'ai aussi ajouté
<meta name="viewport" content="width=device-width, initial-scale=1.0">
tout simplement parce que c'est ce que le site Bootstrap lui-même a.
Dans mon cas, le CSS minographisé bootstrap _ était à l'origine du problème. Pour que bootstrap 3.0.2 soit réactif dans IE8 (émulé à l'aide des outils de développement F12), je devais:
1 - Définissez l'indicateur Compatible X-UA.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
2 - Utilisez le fichier 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]-->
mettez respond.js au bas de la page mais avant de fermer la balise body et voici le lien de respond.js et exécutez ce code dans votre hôte local.
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.js ne prend que ceux-là.
Comme indiqué précédemment, il existe deux problèmes différents: 1) IE8 ne prend pas en charge les requêtes multimédia. 2) Les respond.js utilisés conjointement avec les fichiers CSS multi-domaines doivent ê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="//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 des répertoires locaux.
Après avoir vérifié:
- DOCTYPE
- Balise méta 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 à partir d'un serveur Web et non de Fichier: //
- Ne pas utiliser @import
- ...
Encore, col-lg, col-md et col-sm ne fonctionnaient 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, IE8 est la version standard pour vous et rendre content="IE=Edge" rendra 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, y compris la spécification de niveau 2.1 des feuilles de style en cascade du W3C et l'API des sélecteurs du W3C. il fournit également une prise en charge limitée de la spécification de niveau 3 des feuilles de style en cascade du W3C (version de travail) et des 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 version ultérieure d'Internet Explorer prend en charge un mode de compatibilité supérieur, 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 = "Compatible X-UA" content = "IE = Edge">?
J'ai un correctif pour ce problème. En réalité, IE7 et 8 ne prennent pas correctement en charge le @media et si vous vérifiez les classes css pour les classes "col-md- *" et que leur largeur est donnée dans la largeur du support 992px. Créez simplement un nouveau fichier css IE, par exemple: IE.css, et ajoutez les commentaires conditionnels. Et ensuite, copiez simplement les classes requises pour votre conception directement avec toutes les requêtes de médias là-bas et vous avez terminé.
Nécessaire d'ajouter - <meta http-equiv="X-UA-Compatible" content="IE=Edge">
J'utilisais Bootstrap 3 - cela fonctionnait sur IE sur mon local.
Je l'ai mis en direct n'a pas fonctionné dans IE.
Juste Bootstrap n'inclut pas cette ligne de code dans ses modèles, je ne sais pas pourquoi, mais cela pourrait être dû au fait que ce n'est pas compatible avec le W3C.
J'ai le même problème dans IE 10.0. Je sais que ce n’est pas exactement le problème du PO, mais il sera peut-être utile pour les autres.
Dans mon cas, j'avais une ligne vide au début du document:
[blank line]
<!DOCTYPE html>
<html lang="es">
...
Si la ligne vide est entre le DOCTYPE et la balise, le problème est également affiché:
<!DOCTYPE html>
[blank line]
<html lang="es">
Une fois la ligne vide supprimée, 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 vides 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 dans local ... essayez via localhost ou créez un serveur d'assurance qualité, définissez le contenu et essayez.
Nous avons besoin de respond.js pour bootstrap 3 et cela ne fonctionnera pas sur la machine locale si nous le mettons simplement en js et que nous l'ajoutons au code HTML dans l'en-tête. Il dira que l'accès est refusé. cela ne fonctionne que sur le serveur, car IE a une restriction de sécurité. : P
Si vous utilisez Bootstrap 3 et que tout fonctionne correctement sur les autres navigateurs sauf 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]-->
J'ai lu tous les commentaires ici, tout essayé .. mais je ne pouvais pas le faire fonctionner avec Windows 7 - Internet Explorer 11 (avec mode document: IE8).
Ensuite, il est venu à l'esprit qu'exécuter un mode document (IE8) n'était pas la même chose que le véritable IE8, j'ai donc installé Windows Virtual PC (Windows 7 avec Internet Explorer 8 ) et tadaaaa ... ça marche comme un charme!
J'ai mis ce morceau de code juste au 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>
Juste comme un heads-up. J'ai eu le même problème et aucun de ce qui précède ne l'a résolu pour moi. Finalement, j'ai découvert que respond.js n'analyse pas les CSS référencés via @ import. J'avais tout bootstrap.min.css importé via @import dans mon main.css.
Assurez-vous de ne pas avoir de CSS contenant vos requêtes multimédia référencées via @ import.
J'ai rencontré le même problème, essayé la première réponse mais il manquait quelque chose.
Si vous utilisez Webpack, votre css sera chargé en tant que balise de style non prise en charge par respond.js, il a besoin d'un fichier. Assurez-vous donc que 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
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> permet d'activer les médias. Cette chaîne <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> active les polices bootstrap.
Testé sur Bootstrap 3.3.5
Lien pour télécharger mediaqieries.js . Lien à télécharger bootstrap-ie7.css
J'ai résolu les étapes ci-dessous.
(1) installé le module Respond.js pour drupal 7. (2) le module lessphp pour drupal 7 défini dans des 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 du paramètre de thème.
Pour en savoir plus, consultez le blog de mon site Web pour drupal design et développement www.devangsolanki.com
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 se trouvent en dehors de tout bloc @media et qui fonctionnent sans support de requête multimédia.
Pour fixer la largeur du conteneur, vous pouvez le définir vous-même en dehors d'un bloc @media. Quelque chose comme:
.container {
max-width: @container-tablet;
}
@import "Twitter-bootstrap/less/bootstrap";
Assurez-vous de lier la source bootstrap séparément
Si vous utilisez LESS ou SASS ne soyez pas trop gourmand en compilant les styles. Dans mon projet, j'ai inclus bootstrap.min.css dans 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 de boostrap ne fonctionnaient pas correctement. Lorsqu'il est ajouté séparément, fonctionne comme prévu.