Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround

This article was reproduced from: http://blog.csdn.net/chenhongwu666/article/details/41513901

Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround

Recently made a Web site, has always felt bootstrap very good, this time using the BOOTSTRAP3, in Chrome,firefox,safari,opera,360 browser (fast mode), Sogou browser and other browsers are not a problem, And in IE8 and IE11 found the style can not be displayed, and then all kinds of Baidu Ah, finally in the network of friends with the help of a netizen to solve the problem, also refer to the information of the Chihiro Learning Network, the solution is summarized as follows:

First you need to make sure that your HTML page begins with a DOCTYPE declaration. DOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document, which affects:
Constraint rules for Mark attributes, properties
Affects the browser's rendering mode, and different rendering modes affect the browser's parsing of CSS code and even JavaScript scripts.
DOCTYPE is critical, and the best practice now is to type in the first line of the HTML document:
<! DOCTYPE html>

Great God's post summarizes the bootstrap for several reasons, first of all, BOOTSTRAP3 is a mobile device first principle developed, so the reasons may be as follows:
1. The remote address is not called correctly
that is, as long as the IE9 is below, call two dedicated JS
<!--HTML5 Shim and respond.js IE8 support of HTML5 elements and media queries-->
<!--[if Lt IE 9]>
  <script src= "Http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" ></SCRIPT>
  <script src= "Http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js" ></SCRIPT>
<![ Endif]-->
But I test found that only using the above JS file is not available,
2. Calling method is incorrect
do not refer to Respond.min.js or respond.js or CSS files in file://or @import form

3. Identify the content of the browser (using meta tags to adjust the browser's rendering method)
Bootstrap does not support IE compatibility mode, in order for IE browser to run the latest rendering mode, the following tags will be added to the page
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
Ie=edge indicates the use of the latest IE kernel, chrome=1 that if a browser plugin for IE6/7/8 and other versions of Google Chrome Frame is installed, the user's browser will still look like the IE menu and interface, but when users browse the Web, Actually using the chrome kernel), then use the chrome kernel to render. For specific instructions on this meta tag, see the wonderful answers on StackOverflow,<meta> tags The english explanation of the expert can be found in
Http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
I've added a sentence.
<meta http-equiv= "x-ua-compatible" content= "Ie=9"/>
And then we can.
The kernel controls meta tags, because the current domestic mainstream browser is dual core, so add meta tag to tell the browser what kernel to use to render the page

4.IE8 does not support several properties of container
IE8 does not fully support Box-sizing:border-box and Min-width, Max-width, Min-height or Max-height. So, v3.0.1 's bootstrap in container's class, no longer uses max-width.

Problems caused by the introduction of 5.JS and CSS
You must first reference the CSS in the reference JS
<link rel= "stylesheet" type= "Text/css" href= "bootstrap.min.css" media= "screen"/>
<script type= "Text/javascript" src= "Js/respond.min.js" ></script>

Blank line around 6.DOCTYPE
<! DOCTYPE html>
There are no spaces, so we need to remove the space.

7. You can also manually modify the BOOTSTRAP.CSS
If you are using bootstrap2.1.1, modified navbar-inner{Filter:none} to solve the problem, if you are using 3.0+ version, there is no this code, see the connection
Http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8

8. Using quirks mode (compatible)
When defining a Web page, backward compatibility with the old browser is quirks mode, which corresponds to the standard mode. Specifically, the <! DOCTYPE Html> wrote this before.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
I tested it, it's not feasible.

Finally I tested under IE11, but under IE8 test, there was a problem placeholder not supported
The following is a way to solve the IE support placeholder
The jquery referenced in this article is the 1.11.1 test pass, first referencing jquery
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.11.1.min.js" ></script>
You can also use a different jquery version
Re-introduction of <script type= "Text/javascript" src= "Js/jquery.placeholder.js" ></script>
Jquery.placeholder.js the https://github.com/mathiasbynens/jquery-placeholder of this file
And then add the code to the file.
<script type= "Text/javascript" >
$ (function () {
Invoke the Plugin
$ (' input, textarea '). placeholder ();
});
</script>
If I am here for or the problem is still unresolved, please visit http://hustlzp.com/post/2014/01/ie8-compatibility more detailed

Above ie6,7,8,9,10,11,chrome,firefox,safari,opera,360 browser (fast mode), Sogou browser test pass, only IE5.5 seems not feasible, in short, the problem solved to this, the evil ie6-call it soy sauce go

If you do not want to use jquery.placeholder.js, do not support placeholder under the browser emulation placeholder implementation
may refer to this article to say very detailed http://ju.outofmemory.cn/entry/1595

Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround