bootstrap3 est compatible avec le navigateur IE8 ! _compétences javascript-js tutoriel-php.cn

bootstrap3 est compatible avec le navigateur IE8 ! _compétences javascript

WBOY

Libérer： 2016-05-16 15:02:41

original

1887 Les gens l'ont consulté

Récemment, j'utilise bootstrap, un excellent framework front-end. Ce framework est très puissant. Le framework comprend des menus déroulants, des groupes de boutons, des menus déroulants de boutons, une navigation, des barres de navigation, un fil d'Ariane, une pagination, une mise en page. , les vignettes, les boîtes de dialogue d'avertissement, les barres de progression, les objets multimédias, etc., le bootstrap ont été prédéfinis. Lorsque nous créons une page Web, il suffit d'appeler directement le CSS à l'intérieur de

Bootstrap est une mise en page réactive. Vous pouvez obtenir une excellente expérience de mise en page sur des ordinateurs à écran large, des ordinateurs ordinaires, des tablettes et des téléphones mobiles. Cette mise en page réactive est obtenue grâce à la fonction Media Query de CSS3, qui fait correspondre différents styles selon différentes résolutions. Le navigateur IE8 ne prend pas en charge cette excellente fonctionnalité CSS3. Bootstrap a écrit dans la documentation de développement comment l'utiliser pour être compatible avec IE8. Si vous souhaitez être compatible avec IE6 et IE7, vous pouvez rechercher bsie (bootstrap2)

Bootstrap dans IE8 n'est certainement pas aussi parfait que Chrome, Firefox et IE11. Il n'est pas garanti que certains composants soient entièrement compatibles et vous devez quand même pirater

1. Utilisez la déclaration html5

<!DOCTYPE html>
这里不可以有空格
<html>

Copier après la connexion

Remarque : Il n'est pas possible d'écrire

2. Ajouter une balise méta

Confirmez pour afficher la version IE de cette page

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

Copier après la connexion

Remarque : Bootstrap ne prend pas en charge le mode de compatibilité IE. Afin de permettre au navigateur IE d'exécuter le dernier mode de rendu, la balise ci-dessus sera ajoutée à la page pour forcer l'utilisation du dernier noyau d'IE, Chrome. =1 signifie si IE6 est installé /7/8 et d'autres versions du plug-in du navigateur Google Chrome Frame

3. Importer le fichier bootstrap

Copier le code Le code est le suivant :

4. Présentez html5shiv.min.js et respons.min.js

Laissez les navigateurs qui ne prennent pas (entièrement) en charge html5 « prendre en charge » la balise html5

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

Copier après la connexion

5. Ajouter la bibliothèque Jquery version 1.X

Copier le code Le code est le suivant :

6. Lors des tests sous IE8, un problème a été détecté : l'espace réservé n'est pas pris en charge. Voici une méthode pour résoudre le problème selon lequel IE prend en charge l'espace réservé. Le jquery cité dans cet article est 1.12.0 et a réussi. test. Première citation jquery

<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Copier après la connexion

Vous pouvez également utiliser d'autres versions de jquery puis introduire

[code]
Ajoutez ensuite du code au fichier

<script type="text/javascript">
 $(function () {
  $('input, textarea').placeholder();
 });
</script>

Copier après la connexion

Le code se résume ainsi :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
 <meta name="author" content="zhy" />
 <title>ie8</title>
 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
 <!--[if lte IE 9]>
 <script src=js/bootstrap/respond.min.js"></script>
 <script src=js/bootstrap/html5shiv.min.js"></script>
 <![endif]-->
 <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

Copier après la connexion

Remarque :

1. Déclaration pour déterminer la version d'IE sous IE

<!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见
 
<!--[if lte IE 7]>
<![endif]-->
IE7及其以下版本可见
 
<!--[if IE 6]>
<![endif]-->
只有IE6版本可见
 
<![if !IE]>
<![endif]>
除了IE以外的版本
 
<!--[if lt IE 8]>
<![endif]-->
IE8以下的版本可见
 
<!--[if gte IE 7]>
<![endif]-->

Copier après la connexion

Les versions IE7 et supérieures sont visibles
lte : C'est l'abréviation de Inférieur ou égal à, qui signifie inférieur ou égal à.
lt : C'est l'abréviation de Less than, qui signifie moins que.
gte : C'est l'abréviation de Supérieur ou égal à, qui signifie supérieur ou égal à.
gt : C'est l'abréviation de Greater than, qui signifie supérieur à.
!: Cela signifie pas égal à, ce qui est identique au symbole de jugement d'inégalité en JavaScript

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.