Rumah >hujung hadapan web >tutorial js >bootstrap3 serasi dengan pelayar IE8! _kemahiran javascript

bootstrap3 serasi dengan pelayar IE8! _kemahiran javascript

WBOYasal: 2016-05-16 15:02:411946semak imbas

Baru-baru ini saya telah menggunakan bootstrap, rangka kerja bahagian hadapan yang sangat baik Rangka kerja ini termasuk menu lungsur, kumpulan butang, menu lungsur butang, navigasi, bar navigasi, serbuk roti, halaman, reka letak. , lakaran kecil, kotak dialog amaran, Bar Kemajuan, objek media, dsb., bootstrap telah dipratakrifkan Apabila kami membuat halaman web, kami hanya perlu memanggil css di dalam

secara terus

Bootstrap ialah reka letak responsif Anda boleh mendapatkan pengalaman reka letak yang sangat baik pada komputer skrin lebar, komputer biasa, tablet dan telefon mudah alih. Reka letak responsif ini dicapai melalui fungsi Media Query CSS3, yang memadankan gaya berbeza mengikut resolusi berbeza. Pelayar IE8 tidak menyokong ciri CSS3 yang sangat baik ini telah menulis dalam dokumentasi pembangunan cara menggunakannya agar serasi dengan IE8 dan IE7, anda boleh mencari bsie (bootstrap2)

Bootstrap dalam IE8 pastinya tidak sesempurna Chrome, Firefox dan IE11 Sesetengah komponen tidak dijamin serasi sepenuhnya, dan anda masih perlu menggodam

1. Gunakan pengisytiharan html5

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

Nota: Tidak boleh menulis 1788240603bd903b802bb6bef80979e7

2. Tambah tag meta

Sahkan untuk memaparkan versi IE halaman ini

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

Nota: Bootstrap tidak menyokong mod keserasian IE Untuk membolehkan pelayar IE menjalankan mod pemaparan terkini, teg di atas akan ditambahkan pada halaman IE=edge bermaksud untuk memaksa penggunaan kernel terbaru IE, chrome =1 bermakna jika IE6 dipasang /7/8 dan versi lain pemalam penyemak imbas Google Chrome Frame

3. Import fail bootstrap

Salin kod Kod adalah seperti berikut:

3dd66d06598d471db98f92db02504b90

4. Perkenalkan html5shiv.min.js dan respond.min.js

Biar penyemak imbas yang tidak (sepenuhnya) menyokong html5 "menyokong" teg html5

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

5. Tambahkan pustaka Jquery versi 1.X

Salin kod Kod adalah seperti berikut:

5a9ff99d2cbbf7fe4b408ff50a96c8222cacc6d41bbb37262a98f745aa00fbf0

6. Apabila menguji di bawah IE8, masalah didapati bahawa pemegang tempat tidak disokong Berikut ialah kaedah untuk menyelesaikan masalah yang IE menyokong pemegang tempat yang disebut dalam artikel ini ujian. Jquery petikan pertama

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

Anda juga boleh menggunakan versi jquery lain dan kemudian memperkenalkan

[kod]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0
Kemudian tambahkan beberapa kod pada fail

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

Kod diringkaskan seperti berikut:

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

Nota:

1. Penyata untuk menentukan versi IE di bawah 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]-->

Versi IE7 dan ke atas kelihatan
lte: Ia adalah singkatan Kurang daripada atau sama dengan, yang bermaksud kurang daripada atau sama dengan.
lt: Ia adalah singkatan daripada Kurang daripada, yang bermaksud kurang daripada.
gte: Ia adalah singkatan daripada Lebih Besar daripada atau sama dengan, yang bermaksud lebih besar daripada atau sama dengan.
gt: Ia adalah singkatan daripada Lebih Besar daripada, yang bermaksud lebih besar daripada.
!: Ini bermakna tidak sama dengan, yang sama dengan simbol penghakiman ketidaksamaan dalam JavaScript

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：BOM_pengetahuan asas javascriptArtikel seterusnya：BOM_pengetahuan asas javascript

Artikel berkaitan

Lihat lagi