Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround

Source: Internet
Author: User

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>

BOOTSTRAP3 is the first principle of mobile device 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

1 <!-- [If Lt IE 9]> 2   <script src= "http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" ></script>  3  <script src= "Http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js" ></script>  4<![ ENDIF] -

But I test found that only using the above JS file is not feasible

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 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.

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.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>

And then add the code to the file.

1 <Scripttype= "Text/javascript">2     $(function () {3         //Invoke The plugin4         $('input, textarea'). placeholder ();5     });6 </Script>

Let IE6 IE7 IE8 IE9 IE10 IE11 Support Bootstrap workaround

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.