bootstrap3 is compatible with IE8 browser! _javascript skills-JS Tutorial-php.cn

bootstrap3 is compatible with IE8 browser! _javascript skills

WBOY

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

Original

1898 people have browsed it

Recently I have been using bootstrap, an excellent front-end framework. This framework is very powerful. The framework includes drop-down menus, button groups, button drop-down menus, navigation, navigation bars, breadcrumbs, paging, layout, thumbnails, warning dialog boxes, Progress bars, media objects, etc., bootstrap have been pre-defined. When we create a web page, we only need to directly call the css inside

Bootstrap is a responsive layout. You can get a very excellent layout experience on widescreen computers, ordinary computers, tablets, and mobile phones. This responsive layout is achieved through the Media Query function of CSS3, which matches different styles according to different resolutions. The IE8 browser does not support this excellent CSS3 feature. Bootstrap has written in the development documentation how to use it to be compatible with IE8. If you want to be compatible with IE6 and IE7, you can search for bsie (bootstrap2)

Bootstrap in IE8 is definitely not as perfect as Chrome, Firefox, and IE11. Some components are not guaranteed to be fully compatible, and you still need to hack

1. Use html5 declaration

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

Copy after login

Note: It is not feasible to write

2. Add meta tag

Confirm to display the IE version of this page

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

Copy after login

Note: bootstrap does not support IE compatibility mode. In order to allow IE browser to run the latest rendering mode, the above tag will be added to the page. IE=edge means to force the use of IE's latest kernel, chrome=1 means if IE6 is installed /7/8 and other versions of the browser plug-in Google Chrome Frame

3. Import bootstrap file

Copy code The code is as follows:

4. Introduce html5shiv.min.js and respond.min.js

Let browsers that don’t (fully) support html5 “support” the html5 tag

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

Copy after login

5. Add version 1.X Jquery library

Copy code The code is as follows:

6. When testing under IE8, a problem was found that placeholder is not supported. The following is a method to solve the problem of IE supporting placeholder. The jquery cited in this article is 1.12.0 and passed the test. First quote jquery

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

Copy after login

You can also use other jquery versions and then introduce

[code]
Then add some code to the file

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

Copy after login

The code is summarized as follows:

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

Copy after login

Note:

1. Statement to determine IE version under 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]-->

Copy after login

IE7 and above versions are visible
lte: It is the abbreviation of Less than or equal to, which means less than or equal to.
lt: It is the abbreviation of Less than, which means less than.
gte: It is the abbreviation of Greater than or equal to, which means greater than or equal to.
gt: It is the abbreviation of Greater than, which means greater than.
!: It means not equal to, which is the same as the inequality judgment symbol in JavaScript

The above is the entire content of this article, I hope it will be helpful to everyone’s study.