Bootstrap3 compatible with IE8 browser

1. Mobile device support

2. PC support

Note: Windows supports IE 8-11.

Please refer to Browser Support for detailed Bootstrap 3 support on each browser.

As shown above, IE8 is supported. However, many CSS3 properties and HTML5 elements are not supported. For example, Bootstrap's responsive layout is implemented through CSS3's Media Query function, which matches different styles according to different resolutions. IE8 browser does not support this excellent CSS3 feature. Bootstrap has clearly pointed out in the development documentation that IE8 needs Respond.js to support media query (media query). According to the official documentation, the author added the following code at the bottom of the HTML file <head></head> tag:

 <!--[if lt IE 9]>
    　 <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    <![endif]-->

Note: The html5shiv.min.js file is for browsers that do not (completely) support html5 to support html5 tags; the respond.js file is for IE8 to implement media query support.

However, opening the page in IE8 browser found that the compatibility problem has not been solved ( pit, pit, pit ). By consulting relevant materials, the author summarizes a few points to note ( the key to the realization of the effect ):

Local debugging requires Web Server (such as IIS, Apache, Nginx), and simply opening the file locally cannot see the compatibility effect;
If you find that you have referenced respond.js and Bootstrap, but it still does not work, please check whether your Bootstrap uses a CDN file;
Bootstrap3 requires Html5 document declaration;
Jquery version needs to be below 2.0.

The template code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- encoding format-->
    <meta charset="UTF-8">
    <title></title>
    <!-- Author -->
    <meta name="author" content="author">
    <!-- page description-->
    <meta name="description" content="hello">
    <!-- Keywords are separated by " , " -->
    <meta name="keywords" content="a,b,c">
    <!-- Prevent the browser from accessing the page content from the local machine's cache-->
    <meta http-equiv="Pragma" content="no-cache">
    <!-- Used to prevent others from calling your page in the frame -->
    <meta http-equiv="Window-target" content="_top">
    <!-- The parameters of content are all, none, index, noindex, follow, nofollow, the default is all -->
    <meta name="robots" content="none">
    <!-- Favorite Icons-->
    <link rel="Shortcut Icon" href="favicon.ico">
    <!-- Pages will not be cached -->
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <!-- Solve some compatibility issues, if GCF is installed, use GCF to render the page, if GCF is not installed, use the highest version of IE kernel for rendering. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- The page is displayed at the original scale -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="plugin/bootstrap-3.3.0/css/bootstrap.min.css">
    <!--[if lt IE 9]>
       <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
</head>

<body>

    <script src="plugin/jquery/jquery-1.11.2.min.js"></script>
</body>

</html>

Bootstrap3 compatible with IE8 browser

Guess you like