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 aufrufenBootstrap 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>
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" />
3. Bootstrap-Datei importieren
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
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>
einführen
[code]
Fügen Sie dann der Datei etwas Code hinzu
<script type="text/javascript">
$(function () {
$('input, textarea').placeholder();
});
</script>
<!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>
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]-->
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
