Bootstrap 4 for IE8 and IE9

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

Bootstrap4不再支持IE8和IE9，但通过添加特定的CSS和JavaScript文件，可以恢复对这两个浏览器的兼容。这包括在页面头部添加条件语句，引用CDN托管的CSS和JS文件来补全HTML5元素的支持。此外，对于下拉菜单和模态等交互功能，需要额外的JavaScript修复。文章还提供了安装选项、使用方法以及已知问题列表。

bootstrap-ie8

编辑编辑编辑编辑编辑

Bootstrap 4 for IE8 and IE9

Bootstrap 4 drops support for Internet Explorer 8 and 9, but you can add it back by simply adding a conditional statement targeting IE 8 and 9 with a CSS file and a CDN-hosted JavaScript file to polyfill HTML5 element support.

Quick start

Several quick start options are available:

Download the latest release
Clone the repo git clone https://github.com/coliff/bootstrap-ie8.git
Install with npm npm install bootstrap-ie8
Install with yarn yarn add bootstrap-ie8
Install with Composer composer require coliff/bootstrap-ie8:4.3.1

Usage

Add to the top of the <head> of your page<meta http-equiv="x-ua-compatible" content="ie=edge">
Add the following conditional statements to the of your page but after the Bootstrap 4 CSS:<head>

<span style="color:#24292e"><span style="background-color:#ffffff"><span style="background-color:#f8f8f8"><span style="background-color:#f6f8fa"><code><span style="color:#999988"><em><!--[if IE 9]>
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css" rel="stylesheet">
<![endif]--></em></span>
<span style="color:#999988"><em><!--[if lte IE 8]>
  <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie8.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/g/html5shiv@3.7.3"></script>
<![endif]--></em></span>
</code></span></span></span></span>

Optional JavaScript Fix

To fix the dropdown menus and modals you can add the following to the footer:

<span style="color:#24292e"><span style="background-color:#ffffff"><span style="background-color:#f8f8f8"><span style="background-color:#f6f8fa"><code><span style="color:#999988"><em><!--[if gte IE 9]><!--></em></span>
  <span style="color:#000080"><script </span><span style="color:#008080">src=</span><span style="color:#dd1144">"https://code.jquery.com/jquery-3.5.1.slim.min.js"</span><span style="color:#000080">></script></span>
  <span style="color:#000080"><script </span><span style="color:#008080">src=</span><span style="color:#dd1144">"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"</span><span style="color:#000080">></script></span>
<span style="color:#999988"><em><!--<![endif]--></em></span>
<span style="color:#999988"><em><!--[if IE 9]>
  <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie9.min.js"></script>
<![endif]--></em></span>
<span style="color:#999988"><em><!--[if lte IE 8]>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie8.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.js"></script>
<![endif]--></em></span>
</code></span></span></span></span>

This will load jQuery, PopperJS and Bootstrap as normal on all browsers other than IE8. IE9 will load the script. IE8 will load the latest compatible version of jQuery, the unminified Bootstrap JS (the minified version causes an error) and the fix.bootstrap-ie9.jsbootstrap-ie8.js

FAQS

Q. What does this fix/polyfill?

A. Internet Explorer 9 doesn’t support flexbox so there is a float-based layout fallback and a couple of other minor fixes. Internet Explorer 8 doesn’t support rem units so all units are specified in pixels. Media Queries are also not supported so IE8 has a fixed-width layout (min-width 998px).

Q. Is the CSS hosted on a CDN?

A. Yes, thanks to JSDelivr minified versions are available with the direct links:

https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie8.min.css
https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css

Q. Will you provide LESS/SASS files?

A. Maybe in a future release I’ll provide SASS file (with comments).

Q. Do I need the RespondJS polyfill for IE8 like Bootstrap 3 uses?

A. No. Instead the CSS is set to be fixed-width which makes things a lot easier. You don’t need to change your HTML markup, the CSS will take care of it as the (min-width:992px) media queries are all set.

Q. Where can I see a demo?

A. Right here: Bootstrap for IE8 and IE9 Test Page