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<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title></Head><Body> </Body></HTML>2. Add META tags
The former defines the media query, which determines which version of IE is displayed for this page.
XHTML3. Introduction of bootstrap File<name= "Viewport" content= "Width=device-width, initial-scale=1" ><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.
4. Introduction of Respond.js and Html5.js<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.
XHTML4.1 CSS file Respond.js deployment on CDN (or subdomain)<!-- [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.
<!--respond.js Proxy on external server -<Linkhref= "http://externalcdn.com/respond-proxy.html"ID= "Respond-proxy"rel= "Respond-proxy" /> <!--respond.js redirect location on local server -<Linkhref= "/path/to/respond.proxy.gif"ID= "Respond-redirect"rel= "Respond-redirect" /> <!--respond.js Proxy script on local server -<Scriptsrc= "/path/to/respond.proxy.js"></Script>5, add 1. X version of the jquery library
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.
XHTML6. Summary<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), it is this project let me summarize the above experience out.
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:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "UTF-8"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><Metaname= "Author"content= "Jophy" />//Can be deleted<title>Ie8</title><Linkrel= "stylesheet"href= "Bootstrap/css/bootstrap.min.css"><Linkrel= "stylesheet"href= "Bootstrap/css/style.css">//reference as needed<!--[If LTE IE 9]><script src= "bootstrap/js/respond.min.js" ></script><script src= "bootstrap/js/ Html5.js "></script>//referenced as needed (this project is not referenced) <! [EndIf] -<Scriptsrc= "Http://libs.baidu.com/jquery/1.10.2/jquery.js"></Script>//reference as needed<Scriptsrc= "Bootstrap/js/bootstrap.min.js"></Script></Head>//reference as needed<Body></Body></HTML>XHTML
SOURCE Quote: http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html
Bootstrap 3 compatible IE8 browser (RPM)
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
