I recently did some work to get the website of another Site9 product, Two Minute Mobile, looking right in IE8. To do that, I needed to get the so-called “RespondJS proxy” to work with the Bootstrap CDN. The Bootstrap docs and RespondJS docs cover this pretty well, but it’s all a bit generalized. Here are actual steps to configure the proxy:
- In the head section of your page, change the URL for the Bootstrap CSS file to use the CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> - Inside the conditional-comment section for IE8, after the existing code for RespondJS, add the RespondJS proxy:
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy"> <link href="/vendor/respondjs/respond.proxy.gif" id="respond-redirect" rel="respond-redirect"> <script src="/vendor/respondjs/respond.proxy.js"></script> - Add the RespondJS proxy files (1, 2) to the “/vendor/respondjs/” folder of your website. (You’ll probably need to create this folder.)
The important thing to note is that the RespondJS proxy needs three files to work correctly: a GIF file and a JavaScript file on your domain, and an HTML file on the CDN.
When you’re finished you should have something like this in your page source:
<head>
…
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" media="all">
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="/vendor/respondjs/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="/vendor/respondjs/respond.proxy.js"></script>
<![endif]-->
…
</head>Except for a few unsupported visual effects, and a slight initial delay before RespondJS kicks in, Bootstrap works pretty well for us in IE8. Performance of the Two Minute Mobile website is crucial to us, and the ability to use a content delivery network to boost speed while still supporting IE8 is a big win.
Just want to say thanks for this. It saved my life. Was running into some problems with some production code that required support for Internet Explorer 8 and nothing worked (except for this that is). This article was super useful. Bookmarked 🙂
Awesome help! Very welcome…
Great workaround, fixed on my sites, thanks.
Worked great, although not until I put IE in IE8 Standards document mode.
Sir, you are nothing less than a hero. I salute you.
Lovely!! Works like a Charm
I am getting following error message ” ‘respond-redirect’ is not a valid identifier.”. when implementing this solution. Could you please help
Can you tell me if there was a change to either the respond.js or bootstrap.min.css files that would support the HTML element navbar-header to not display in IE8. However, it does display properly in IE 9, 10 and 11 and google chrome. All of a sudden this morning my nav-bar header is not visible in IE 8.