Bootstrap3 ist mit dem IE8-Browser kompatibel! _Javascript-Kenntnisse-js-Tutorial-php.cn

Bootstrap3 ist mit dem IE8-Browser kompatibel! _Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:02:41

Original

1912 Leute haben es durchsucht

Kürzlich verwende ich Bootstrap, ein hervorragendes Front-End-Framework. Das Framework umfasst Dropdown-Menüs, Schaltflächengruppen, Schaltflächen-Dropdown-Menüs, Navigation, Navigationsleisten, Breadcrumbs, Paginierung und Layout , Miniaturansichten, Warndialogfelder, Fortschrittsbalken, Medienobjekte usw., Bootstrap wurden vordefiniert. Wenn wir eine Webseite erstellen, müssen wir nur das CSS in

direkt aufrufen

Bootstrap ist ein responsives Layout. Sie können ein hervorragendes Layout-Erlebnis auf Breitbildcomputern, normalen Computern, Tablets und Mobiltelefonen erzielen. Dieses responsive Layout wird durch die Media Query-Funktion von CSS3 erreicht, die verschiedene Stile je nach Auflösung abgleicht. Der IE8-Browser unterstützt diese hervorragende CSS3-Funktion nicht. In der Entwicklungsdokumentation wurde beschrieben, wie Sie sie verwenden können, um mit IE6 und IE7 kompatibel zu sein. Sie können nach bsie (bootstrap2) suchen

Bootstrap in IE8 ist definitiv nicht so perfekt wie Chrome, Firefox und IE11. Es ist nicht garantiert, dass einige Komponenten vollständig kompatibel sind, und Sie müssen trotzdem hacken

1. Verwenden Sie die HTML5-Deklaration

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

Nach dem Login kopieren

Hinweis: Es ist nicht möglich,

2. Meta-Tag hinzufügen

Bestätigen Sie, um die IE-Version dieser Seite anzuzeigen

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

Nach dem Login kopieren

Hinweis: Bootstrap unterstützt den IE-Kompatibilitätsmodus nicht. Damit der IE-Browser den neuesten Rendering-Modus ausführen kann, wird der obige Tag IE=edge hinzugefügt, um die Verwendung des neuesten IE-Kernels, Chrome, zu erzwingen =1 bedeutet, dass IE6 /7/8 und andere Versionen des Browser-Plugins Google Chrome Frame installiert sind

3. Bootstrap-Datei importieren

Code kopieren Der Code lautet wie folgt:

4. Führen Sie html5shiv.min.js undrespond.min.js ein

Lassen Sie Browser, die HTML5 nicht (vollständig) unterstützen, das HTML5-Tag „unterstützen“

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

Nach dem Login kopieren

5. Fügen Sie die JQuery-Bibliothek der Version 1.X hinzu

Code kopieren Der Code lautet wie folgt:

6. Beim Testen unter IE8 wurde ein Problem festgestellt, das den Platzhalter nicht unterstützt Test. Erstes Zitat jquery

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

Nach dem Login kopieren

Sie können auch andere JQuery-Versionen verwenden und dann

einführen

[code]

Fügen Sie dann der Datei etwas Code hinzu

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

Nach dem Login kopieren

Der Code ist wie folgt zusammengefasst:

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

Nach dem Login kopieren

Hinweis:

1. Anweisung zur Bestimmung der IE-Version unter 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]-->

Nach dem Login kopieren

Versionen von IE7 und höher sind sichtbar

lte: Dies ist die Abkürzung für „Less than or equal to“, was „kleiner als oder gleich“ bedeutet.
lt: Es ist die Abkürzung für Less than, was weniger als bedeutet.
gte: Dies ist die Abkürzung für „Größer als oder gleich“, was „größer als oder gleich“ bedeutet.
gt: Es ist die Abkürzung für Greater than, was größer als bedeutet.
!: Es bedeutet „ungleich“ und ist dasselbe wie das Ungleichheitsbeurteilungssymbol in JavaScript

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.