Bootstrap 4 for IE8 and IE9
Posted:
January 16, 2018
Bootstrap 4 drops support for Internet Explorer 8 and 9. Worldwide usage stats of both browsers are miniscule now (IE8 is at 0.27% and IE9 at 0.16% based on StatCounter GlobalStats for December, 2017), but still there maybe times when you need to support these older browsers.
I’ve created a CSS-only polyfill solution which can be loaded via conditional statements as follows:
<!--[if IE 9]>
<link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css" rel="stylesheet">
<![endif]-->
<!--[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]-->
IE9 Visitors will get a bootstrap-ie9.css
stylesheet which provides a float-based layout fallback since IE9 doesn’t support Flexbox.
IE8 visitors will get a bootstrap-ie8.css
stylesheet which fixes many compatibility issues including all px units converted to rems and a fixed-width (1000px) layout is used. In addition the HTML5Shiv polyfill is loaded via a CDN.
More info on GitHub
UPDATE 05/05/2018: The project now includes a JavaScript fix for modals and dropdown menus to work correctly.
Comments
Sait Firat NEMIS
Hi,
How i can change main color blue to orange on BootStrap 4 Basic Wordpress Theme ? If you could help i will be glad. I already try to change all #007bff to #fd7e14 in .css files but nothing changed :(
christian oliff
Hi Sait Firat NEMIS. To change the default link color (blue: #007bff) then I’d add the following CSS at the end; a {color:#fd7e14 !important}
Alexander
You have no initialization popover and tooltip. Therefore, they do not work in the demo. Add code in the file, for example common.js if gte IE 9 $(function() {
});
and add code in the file, for example common-ie8.js if lte IE 8 (function ($) {
})(jQuery);
Thank you for your work.
David Burns
Thanks for this. Just used it on my site - IE9 traffic appeared to have increased from approx 0 up to 2% of total. Pages were previously close to unusable. Pretty much fixed with your stylesheet. Cheers.
Leave a Comment
Your email address will not be published. Required fields are marked *