If there is a similarity, I am honored, if it is reprinted, please indicate
Workaround to make IE6 IE7 IE8 IE9 IE10 IE11 support Bootstrap
Recently made a web site,I have always felt that bootstrap is very good,This time I used bootstrap3,Chrome,Firefox,Safari,Opera,360 browser (speed mode),Sogou browser and other browsers have no problems,And under IE8 and IE11 found that the style could not be displayed,Then various Baidu,Finally with the help of a netizen post on Yapeng.com solved the problem,Also refer to Qianxun Learning Network The solution is summarized as follows:
First, make sure that your HTML page starts with a DOCTYPE declaration. DOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document, which affects the following factors:
Constraints on tags attributes and properties
Affects the browser's rendering mode, and different rendering modes affect the browser's parsing of CSS code and even Javascrip{filter}t scripts
DOCTYPE is critical, and the current best practice is to type on the first line of the HTML document:
<!DOCTYPE html>
There are several reasons for finding bootstrap summarized in the post of the god, first of all, Bootstrap3 was developed on the principle of mobile device first, so the reasons may be as follows:
1. The remote address is not being called correctly
That is, as long as it is IE9 or lower, call two special js
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<scrip{filter}t src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></scrip{filter}t>
<scrip{filter}t src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></scrip{filter}t>
<![endif]-->
But I tested and found that just using the above js files is not feasible,
2. The call method is incorrect
Do not reference respond.min.js or respond.js or CSS files in file:// or @import form
3. Identifying the content of the browser (using meta tags to adjust the browser's rendering method)
The bootstrap does not support IE compatibility mode, and in order for IE to run the latest rendering mode, the following tags will be added to the page
IE=edge means that the latest IE kernel is forced, and chrome=1 means that if the browser plug-in Google Chrome Frame for IE6/7/8 and other versions is installed (which can make the user's browser look still IE's menu and interface, but the user is actually using the Chrome browser kernel when browsing the web), then the Chrome kernel is used to render. For a specific explanation of this meta tag, see the great answer on StackOverflow, and the <meta>English explanation of the tag expert can be found here
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
I added
<meta http-equiv="X-UA-Compatible" content="IE=9" />
And then there you go
The kernel controls the meta tag, because the current mainstream browsers in China are dual kernels, so the meta tag is added to tell the browser what kernel to use to render the page
4. IE8 does not support several properties of containers
IE8 does not fully support box-sizing: border-box is used with min-width, max-width, min-height, or max-height. Therefore, the container class in bootstrap v3.0.1 no longer uses max-width.
5.JS issue caused by the order in which CSS is introduced
You have to quote css before referencing js
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE has blank lines before and after
<!DOCTYPE html>
It is not okay to have spaces here, you have to remove the spaces
<html>
7. You can also modify the bootstrap.css manually
If you are using bootstrap 2.1.1, modifying navbar-inner{ filter:none} can solve the problem, if you are using version 3.0+, there is no code, please see the connection for details
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Use quirks mode
When defining a web page, the mode that is backwards compatible with older browsers is quirks mode, and the corresponding "standard mode" is standard mode. Specifically, <!DOCTYPE html> is written as before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I tested this, but it is not feasible
Finally I tested under IE11, but tested under IE8 and found a problem that placeholder is not supported
Here's how to solve IE's support for placeholders
The jquery referenced in this article is tested in 1.11.1, and jquery is referenced first
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
You can also use other jquery versions
Then introduce <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js download address for this file https://github.com/mathiasbynens/jquery-placeholder
Then add some code to the file
<scrip{filter}t type="text/javascrip{filter}t">
$(function () {
// Invoke the plugin
$('input, textarea').placeholder();
});
</scrip{filter}t>
If I am involved here or if the problem is still unresolved, please move http://hustlzp.com/post/2014/01/ie8-compatibility more details
The above IE6, 7, 8, 9, 10, 11, chrome, firefox, safari, opera, 360 browser (speed mode), Sogou browser test passed, only IE5.5 seems to be not feasible, in short, the problem is solved here, all evil IE6 - call it soy sauce
If you don't want to use jquery.placeholder.js, you can no longer support placeholder emulation implementations under browsers
You can refer to this article for a very detailed http://ju.outofmemory.cn/entry/1595 |
Posted on 8/3/2016 10:55:23 PM
|
|
|
Landlord