bootstrap3 serasi dengan pelayar IE8! _kemahiran javascript-tutorial js-php.cn

bootstrap3 serasi dengan pelayar IE8! _kemahiran javascript

WBOY

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

asal

1922 orang telah melayarinya

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>

Salin selepas log masuk

Nota: Tidak boleh menulis

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

Salin selepas log masuk

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:

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

Salin selepas log masuk

5. Tambahkan pustaka Jquery versi 1.X

Salin kod Kod adalah seperti berikut:

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>

Salin selepas log masuk

Anda juga boleh menggunakan versi jquery lain dan kemudian memperkenalkan

[kod]
Kemudian tambahkan beberapa kod pada fail

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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.