BOOTSTRAP3 compatible IE8 Browser! _javascript Tips

The recent use of bootstrap in this excellent front-end framework, the framework is very powerful, the framework has Drop-down menus, button Groups, Button pull-down menu, navigation, navigation bar, breadcrumbs, pagination, layout, thumbnails, warning dialog boxes, progress bar, media objects, etc., bootstrap have been predefined, When we make a Web page, just call the CSS directly inside

Bootstrap is a responsive layout and you can get a great layout experience on widescreen computers, regular computers, tablets, and mobile phones. The layout of this response is achieved through the CSS3 Media query feature, which matches different styles according to different resolutions. The IE8 browser does not support this excellent CSS3 feature, Bootstrap wrote in the development document how to use a compatible IE8, and if you want to be compatible with IE6,IE7, you can search Bsie (BOOTSTRAP2)

Bootstrap in the IE8 is not as good as Chrome, Firefox, IE11 so perfect, some components do not guarantee full compatibility, or to hack

1. Use HTML5 statement

<! DOCTYPE html>
There can be no spaces
 
 

Note: written <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > is not feasible

2. Add META tags

Make sure that the IE version of this page is displayed

<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, will add the above tags in the page, Ie=edge said to enforce the use of IE the latest kernel, Chrome=1 said if installed for IE6/7/8 version of the browser plugin Google Chrome Frame

3, the introduction of bootstrap documents

Copy Code code as follows:

<link href= "Css/bootstrap/bootstrap.min.css" rel= "stylesheet" >

4. Introduction of Html5shiv.min.js and Respond.min.js

Allow browsers that do not (fully) support HTML5 to "support" HTML5 tags

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

5, add 1. X version of the jquery library

Copy Code code as follows:

<script src= "Js/bootstrap/jquery-1.12.0.min.js" ></script>

6, under the IE8 test, found a problem placeholder is not supported, the following is the solution IE support Placeholder method, this article refers to the jquery is 1.12.0 test pass, 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]<script type= "Text/javascript" src= "Js/bootstrap/jquery.placeholder.js" ></script>
Then add the code to the file

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

The code concludes as follows:

<! DOCTYPE html>
 
 

Note:

1, ie under the judgment of IE version of the statement

<!--[If LTE IE 6]>
<![ Endif]-->
IE6 and the following versions are visible
 
<!--[if LTE IE 7]>
<![ Endif]-->
IE7 and the following version are visible
 
<!--[if IE 6]>
<![ Endif]-->
only IE6 versions are visible
 
<![ if! Ie]>
<![ endif]>
except IE version
 
<!--[if LT ie 8]>
<![ Endif]-->
IE8 The following version is visible
 
<!--[if GTE IE 7]>
<![ Endif]-->

IE7 and larger than IE7 versions are visible
LTE: Is the shorthand for less than or equal to, meaning less than or equal to.
LT: It is the shorthand for less than, which means less than.
GTE: is the shorthand for greater than or equal to, which is greater than or equal to the meaning.
GT: is the shorthand for greater than, which means greater than.
! : Is not equal to the meaning, and JavaScript is not equal to the same judge character

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.