Full-line IE support Bootstrap solutions _javascript tips

Recently done a Web site, has always felt bootstrap very good, this time using BOOTSTRAP3, chrome,firefox,safari,opera,360 browser (speed mode), Sogou browser and other browsers are no problem, And in IE8 and IE11 found style can not show, and then a variety of Baidu Ah, finally in a netizen post help solve the problem, the first solution summarized as follows:

First you need to make sure that your HTML page starts with a DOCTYPE declaration. DOCTYPE tells the browser what HTML or XHTML specification to use to parse HTML documents, which can affect:

Constraint rules for attributes and properties of tags
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 at the moment is to type in the first line of the HTML document:

<! DOCTYPE html>

The Great God's post summarizes the reasons for the bootstrap, first of all, BOOTSTRAP3 is developed for the principle of mobile device priority, so the reasons may be as follows:

1. The remote address is not called correctly

That is, as long as IE9 below, call two dedicated JS

<!--HTML5 Shim and respond.js IE8 support of HTML5 elements and media queries-->
<!--[if Lt IE 9]>
 & Lt;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 just using the above JS file is not OK,

2. The 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 contents of the browser (use META tags to adjust the browser's rendering mode)

Bootstrap does not support IE compatibility mode, in order to allow IE browser to run the latest rendering mode, will add the following tags in the page
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
Ie=edge indicates that the IE's latest kernel is enforced, chrome=1 says that if you install a browser plug-in for IE6/7/8, Google Chrome Frame (which will make the user's browser look the same as IE's menu and interface, but when browsing the web, the user Actually use the chrome kernel), then use the chrome kernel to render it. For specific instructions on this meta tag, see the wonderful answers on StackOverflow.,<meta> label High Man's English explanation can refer to
Http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
I have added a sentence
<meta http-equiv= "x-ua-compatible" content= "Ie=9"/>
And then it's okay.
The kernel controls meta tags because the current domestic mainstream browsers are dual-core, so add meta tags 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, the container class in the bootstrap of v3.0.1 is no longer used.

5.JS and CSS introduced in order to cause problems

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>

6.DOCTYPE blank line before and after

<! DOCTYPE html>
There is no space here, to remove the space

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

8. Use quirks mode (compatibility)

When you define a Web page, the pattern of the backward-compatible old browser is quirks mode, which corresponds to the "standard mode" that is Standard mode. Specifically, the <! will be DOCTYPE Html> wrote this before.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
I've tested this, it's not workable.

Finally I passed the test under IE11, but under IE8, there was a problem placeholder was not supported

The following is a solution for 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 the other jquery version
Introducing <script type= "Text/javascript" src= "Js/jquery.placeholder.js" ></script>
Jquery.placeholder.js download address for this file Https://github.com/mathiasbynens/jquery-placeholder
And then add the code to the file.

<script type= "Text/javascript" >
  $ (function () {
    //Invoke The plugin
    $ (' input, textarea '). Placeholder ();
  });
</script>

above ie6,7,8,9,10,11,chrome,firefox,safari,opera,360 browser (speed mode), Sogou Browser test through, only IE5.5 seems not feasible, in short, the problem to solve this, the evils of the ie6-are called it soy sauce go