Home > Developer > JavaScript
The solution for full-system IE support Bootstrap is iebootstrap.
I recently made a Web website and thought bootstrap was very good. I used bootstrap3 this time, in chrome, firefox, safari, opera, and 360 browsers (fast mode) the sogou browser and other browsers have no problem, but the style cannot be displayed in IE8 and IE11, and Baidu finally solved the problem with the help of a netizen post, the solution is summarized as follows:
Make sure that the DOCTYPE Declaration is available at the beginning of your HTML page. DOCTYPE tells the browser what HTML or XHTML specifications are used to parse HTML documents. The specific impact is as follows:
Constraint rules for marking attributes and properties
It has an impact on the rendering mode of the browser. Different rendering modes will affect the parsing of CSS code and even JavaScript scripts by the browser.
DOCTYPE is critical. Currently, the best practice is to type in the first line of the HTML document:
<!DOCTYPE html>
This post summarizes several reasons for bootstrap search. First, Bootstrap3 is developed based on the principle of priority for mobile devices, so the reasons may be as follows:
1. The remote address is not called correctly.
That is, as long as it is less than IE9, two specialized 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]-->
However, my test showed that only the above js files are not feasible,
2. The call method is incorrect.
Do not reference the respond. min. js, respond. js, or css file in the format of file: // or @ import.
3. Identify the content of the browser(Adjust the rendering method of the browser using the meta tag)
Bootstrap does not support IE compatibility mode. To enable IE to run the latest rendering mode, the following labels are added to the page.
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, Chrome = 1"/>
IE = edge indicates that the latest kernel of IE is forcibly used, chrome = 1 indicates that if Google Chrome Frame is installed as a browser plug-in for IE6/7/8 or other versions (the user's browser looks like IE's menu and interface, but when users browse the Web page, they actually use the Chrome browser kernel), so they use the Chrome kernel for rendering. For more information about the meta tag, see the excellent answer on StackOverflow.
Http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
I added a sentence
<Meta http-equiv = "X-UA-Compatible" content = "IE = 9"/>
Then you can.
The kernel controls the Meta tag. Because the mainstream browsers in China currently use dual kernels, the meta tag is added to tell the browser which kernels are used to render the page.
4. IE8 does not support several container attributes.
IE8 does not fully support box-sizing: border-box and min-width, max-width, min-height or max-height. therefore, max-width is no longer used for the container class in bootstrap of v3.0.1.
5. problems caused by the introduction sequence of JS and CSS
Css must be referenced before js
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/><script type="text/javascript" src="js/respond.min.js"></script>
6. Empty rows before and after DOCTYPE
<! DOCTYPE html>
There is no space here. Remove the space.
<Html>
7.alternatively, You can manually modify bootstrap.css.
If you are using bootstrap2.1.1 and modified navbar-inner {filter: none} to solve the problem, if you are using version 3.0 +, there is no such code. For details, refer to the connection
Http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Use quirks mode (compatible mode)
When defining a webpage, the mode that is backward compatible with the old browser is quirks mode, corresponding to "standard mode" or "standard mode. Specifically, set <! DOCTYPE html> previously written
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
This is not feasible because I have tested it.
Finally, I passed the test in IE11, but in IE8, I found a problem where placeholder is not supported.
The following describes how to solve the problem that IE supports placeholder.
Jquery referenced in this article is tested in 1.11.1.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
You can also use other jquery versions.
Introduce <script type = "text/javascript" src = "js/jquery. placeholder. js"> </script>
Jquery. placeholder. js the file's https://github.com/mathiasbynens/jquery-placeholder
Then add the code to the file.
<script type="text/javascript"> $(function () { // Invoke the plugin $('input, textarea').placeholder(); });</script>
IE6, 7, 8, 9, 10, 11, chrome, firefox, safari, opera, 360 browser (fast mode), sogou browser passed the test, only IE5.5 seems not feasible, to solve the problem, IE6, the evil Internet Explorer, calls it soy sauce.
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
