Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround

http://blog.csdn.net/chenhongwu666/article/details/41513901

If there is similar, it is honored, if reproduced, please specify

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 the IE8 and IE11 found the style can not be displayed, and then all kinds of Baidu Ah, finally in
Ya Peng Network of a netizen post to solve the problem, but also refer to the Chihiro Learning Network
Information, 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:
To mark attributes
, properties of the constraint rules
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>


The Great God's post summarizes the reasons for Bootstrap's search, first of all, BOOTSTRAP3
Is the principle of mobile device first development, so the reasons may be as follows:
1. Remote address is not correctly invoked
That is, as long as the IE9 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 OK,

<!----------------

Landlord, I am also very strange this problem, put on the server is not a problem, there are problems in the local, and I have a local run there are two cases 1. Run the HTML file directly locally, trace the code, ie8-responsive-file-warning.js, debug it Out is the file protocol.

Reference 9 Floor zw_l_1989 's reply:

respond.js because of the use of file://protocol, IE8 is unable to adjust the local file is simply that you want to deploy on the Web container such as IIS to see the effect

Ok. 2. Use the local Apache server, configure the virtual host, with the virtual domain name, change the host file domain name resolution point, The situation is ie8-responsive-file-warning.js file judgment this closed, open IE F12 See file loading situation, Respond.js file also loaded, but in respond.js file break point words jump in, that is no run, do not know why

------------------------------->

2. Incorrect calling method
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 indicates that if a browser plugin for IE6/7/8 and other versions is installed, Google Chrome
Frame (which allows the user's browser to look the same as IE's menu and interface, but when the user is actually browsing the web with the chrome kernel), then it is rendered using the chrome kernel. 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, you have modified the navbar-inner{
Filter:none} can solve the problem, if you are using version 3.0+, there is no code, please 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
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