Home > Article > Web Front-end > bootstrap3 is compatible with IE8 browser! _javascript skills

bootstrap3 is compatible with IE8 browser! _javascript skills

WBOYOriginal: 2016-05-16 15:02:411818browse

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>

Note: It is not feasible to write a73094d7f9503c885bdc52b97b2daeb7

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

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:

bbf480da4661c22126576030412f4d8e

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

5. Add version 1.X Jquery library

Copy code The code is as follows:

9a4378c96be7d532981fc4b742be69372cacc6d41bbb37262a98f745aa00fbf0

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>

You can also use other jquery versions and then introduce

[code]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0
Then add some code to the file

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

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>

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

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：BOM_basic knowledge of javascriptNext article：BOM_basic knowledge of javascript

See more

bootstrap3 is compatible with IE8 browser! _javascript skills

Related articles