From:http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html
Recently in the study of Bootstrap (official, Github), the excellent front-end framework, Bootstrap was initially a front-end framework within the Twitter team, and the so-called front-end framework was a css/html framework with drop-down menus, button groups, button drop-down menus, Navigation, navigation bar, breadcrumbs, pagination, typography, thumbnails, warning dialogs, progress bars, media objects, and more. Bootstrap they pre-defined, and so on the official production page, we can directly use the class on it.
Today does not introduce the function of the bootstrap, has the opportunity to be able to introduce emphatically once more, really is very outstanding. responsive layouts , custom-built, component-rich, and the perfect fit for jquery.
Go to the topic and say bootstrap 3 compatibility IE8 problem.
Bootstrap is a responsive layout that allows you to have a very good layout experience on widescreen, PC, tablet, and mobile phones. This responsive layout is implemented through the CSS3 Media query feature, which matches different styles depending on the resolution. IE8 Browser does not support this excellent CSS3 feature, Bootstrap wrote in the development document how to use the compatible IE8. However, the author has tried unsuccessfully, the layout of IE8 is chaotic. Until today, I decided to try again and finally succeed. Some of the details were not noticed, resulting in IE8 's inability to respond to layout.
Below explains how to make Bootstrap 3 compatible IE8 browser, as for someone will ask me how to compatible with IE6 IE7, please bypass search Bsie (BOOTSTRAP2).
Bootstrap in IE8 is certainly not as perfect as chrome, Firefox, IE11, and some components are not guaranteed to be fully compatible or to be hack. We're not talking here.
1. Use HTML5 Document DeclarationUse the zencoding user input html:5 and then press the TAB key.
XHTML| 12345678910 | <!doctype html> lang="en"> <meta CharSet="UTF-8"> <title>Document</title> <body> </body> |
The former defines the media query, which determines which version of IE is displayed for this page.
XHTML| 12 | <meta Name="viewport" content="Width=device-width, initial-scale=1"> <meta http-equiv="X-ua-compatible" content="Ie=edge"> |
XHTMLThis is important to see if you are referencing a bootstrap file from another website (CDN) or putting the bootstrap file locally.
Here I put it locally, because the deployment after that is relatively straightforward.
| 1 | <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> |
Respond.js (Github) is for media queries, description of the project: to be placed in the same domain as the file that needs to be queried for media. Otherwise, the CDN deployment needs to change some options, and then again.
Html5shiv:html5.js (Google Code) (Github) is the "support" HTML5 tag for browsers that do not (fully) support HTML5.
XHTML| 1234 | <!--[if LTE IE 9]> <script src="Bootstrap/js/respond.min.js"></script> <script src="Bootstrap/js/html5.js"></script> <![ Endif]--> |
XHTMLFor details, see: Https://github.com/scottjehl/Respond#cdnx-domain-setup
GitHub says that this JS is a copy of your CSS file via Ajax. So a proxy page is required to request the file.
Need to upload some files, the steps are more complex, and the general public CDN Basically no one has this permission to operate.
Add the code later.
| 12345678 | <!--respond.js Proxy on external server --<link href="http://externalcdn.com/respond-proxy.html" id="Respond-proxy" rel="Respond-proxy" /> <!--respond.js redirect location on local server --<link href="/path/to/respond.proxy.gif" id="Respond-redirect" rel ="Respond-redirect" /> <!--respond.js Proxy script on local server --<script src="/path/to/respond.proxy.js"></script> |
Jquery more than 2.0 will no longer support IE 6/7/8 the three major abuse of the heart artifact. So you want to use some plug-in effects in Bootstrap3, such as controls such as the modal popup dialog box. We need to add 2.0 below, here I use 1.10.2 's jquery library.
XHTML| 1 | <script src="Http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> |
I am a non-front-end engineer, just a fan, if there are errors, please criticize the advice. We learn from each other ~
I also do a BOOTSTRAP3 small project (name code query, because the use of Cdn,e8 has a short screen flash, and screen flash can not be avoided), it is this project let me summarize the above experience.
Mainly is to let respond.js effect, the key is to let bootstrap files and respond.js the same domain, different domains need to use the CDN HTML to do Ajax.
The lazy person code is summarized as follows:
XHTML| 1234567891011121314151617181920 | <!doctype html>lang="ZH-CN"> <meta CharSet="UTF-8"> <meta name="viewport" content="Width=device-width, initial-scale=1" > <meta http-equiv="x-ua-compatible" content="Ie=edge"> <meta name="Author" content="jophy" /> <title>ie8</title> <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css" > <link rel="stylesheet" href="Bootstrap/css/style.css"> <!--[if LTE IE 9]> <script src="Bootstrap/js/respond.min.js"></script> <script src="Bootstrap/js/html5.js"></script> <! [endif]--> <script src="Http://libs.baidu.com/jquery/1.10.2/jquery.js"></script > <script src="Bootstrap/js/bootstrap.min.js"></script> <body></body> |
"Go" makes Bootstrap 3 compatible with IE8 browser
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
