Home > Developer > JavaScript

Bootstrap3 is compatible with Internet Explorer 8 !, Bootstrap3ie8

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Bootstrap3 is compatible with Internet Explorer 8 !, Bootstrap3ie8

We are using the excellent front-end framework of bootstrap recently. This framework is very powerful, the framework contains a drop-down menu, button group, button drop-down menu, navigation bar, navigation bar, breadcrumb, paging, layout, thumbnail, warning dialog box, progress bar, and media objects, bootstrap has been pre-defined. When we create a webpage, we only need to directly call the css in it.

Bootstrap is a responsive layout. You can enjoy excellent layout experience on wide screen computers, normal computers, tablets, and mobile phones. This responsive layout is achieved through the Media Query function of CSS3, and different styles are matched according to different resolutions. The IE8 browser does not support this excellent Css3 feature. Bootstrap writes in the development document how to use it for IE8 compatibility. If you want to be compatible with IE6 and IE7, you can search for bsie (bootstrap2)

Bootstrap is definitely not as perfect as Chrome, Firefox, and IE11 in IE8. Some components do not guarantee full compatibility and require Hack.

1. Use html5 Declaration

<! DOCTYPE html> no space is allowed here 

Note: <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> is not feasible


2. Add meta tags


Are you sure you want to display the IE version of this web 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 the IE compatibility mode. To enable IE to run the latest rendering mode, add the preceding labels to the page. IE = edge indicates that the latest IE kernel is forcibly used, chrome = 1 indicates that if a browser plug-in for IE6/7/8 or another version is installed, Google Chrome Frame


3. Introduce the bootstrap File


Copy codeThe Code is as follows: <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet">


4. Introduce 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 the 1.x Jquery library.


Copy codeThe Code is as follows: <script src = "js/bootstrap/jquery-1.12.0.min.js"> </script>


6. Test in IE8 and find a problem where placeholder is not supported. The following is a solution for IE to support placeholder. jquery referenced in this article is passed the test in 1.12.0. jquery is referenced first.


<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 to 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 is summarized as follows:


<!DOCTYPE html>

Note:


1. IE statement


<! -- [If lte IE 6]> <! [Endif] --> IE6 and earlier versions are visible <! -- [If lte IE 7]> <! [Endif] --> IE7 and earlier versions are visible <! -- [If IE 6]> <! [Endif] --> only IE6 is visible <! [If! IE]> <! [Endif]> versions other than IE <! -- [If lt IE 8]> <! [Endif] --> versions earlier than IE8 are visible <! -- [If gte IE 7]> <! [Endif] -->


IE7 and Versions later than IE7 are visible
Lte: Short for Less than or equal to, that is, Less than or equal.
Lt: Short for Less than, that is, Less.
Gte: Short for Greater than or equal to, that is, Greater than or equal.
Gt: Short for Greater than, that is, Greater.
! : It means not equal to, which is the same as the non-equal identifier in javascript.


The above is all the content of this article, hoping to help you learn.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
internet explorer 8 1 download internet explorer stopped working windows 8 1 clear cache and cookies internet explorer 8 internet explorer 8 cannot display webpage internet explorer not responding windows 8 1 internet explorer for mac 10 6 8 internet explorer repair tool windows 8 1

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More