Heim > Artikel > Web-Frontend > Bootstrap3 ist mit dem IE8-Browser kompatibel! _Javascript-Kenntnisse

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

WBOYOriginal: 2016-05-16 15:02:411878Durchsuche

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>

Hinweis: Es ist nicht möglich, a82edddec7dac097fdebe8dfbbe061d5

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

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:

3dd66d06598d471db98f92db02504b90

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

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

Code kopieren Der Code lautet wie folgt:

5a9ff99d2cbbf7fe4b408ff50a96c8222cacc6d41bbb37262a98f745aa00fbf0

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>

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

einführen

[code]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0

Fügen Sie dann der Datei etwas Code hinzu

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

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>

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

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：BOM_Grundkenntnisse in JavascriptNächster Artikel：BOM_Grundkenntnisse in Javascript

In Verbindung stehende Artikel

Mehr sehen