Bootstrap fixes IE8 not working for me yet

[Dmytry]

I just wanted to add I was also having this problem, the solution for me was to make sure you add:

<!--[if lt IE 9]>
  <script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

AFTER you link your CSS NOT before.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lt IE 9]>
  <script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

If your CSS is linked after the respond.js it doesn’t work!

[mrduguo]

My problem is that inline style tag css won’t work with this technical. It only with external referenced css file (with CROS header if on different domain).

[Franco Mego]

I suggest put your code in footer.php just before of </body>, to me it has worked.
Read this for explanation: http://bit.ly/1thBp95
Excuse my English, I speak spanish :)
Lucky.

[Shahjehan]

These file only works in server not in offline files for ie8, Thanks,
You can check

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<!–[if lt IE 9]>
<script src=”http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script&gt;
<script src=”http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script&gt;
<![endif]–>

[carasmo]

Respond js does not work with css hosted somewhere else (like the CDN) AND your link to your css file must be relative, otherwise you have to make a proxy. See their docs. It ALWAYS works if the docs are followed.

[Rishabh Sanghi]

Hello Friends,
For running page in ie8 & above, we need to add
https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js in head section. See below code:
<script type=”text/javascript” src=’https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script&gt;
<!–[if lt IE 9]>
<script type=”text/javascript” src=’https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js’></script&gt;
<script type=”text/javascript” src=’https://oss.maxcdn.com/respond/1.4.2/respond.min.js’></script&gt;
// JavaScript Document

[paulsmith]

For one recent site putting the respond in the same place as the site (as carasmo mentions) rather than “https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&#8221; did the trick

<div><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]--></div>

however i’ve copied this method to another site and it just doesn’t seem to work! I went back to the Bootstrap demo and this doesn’t seem to work either..
http://getbootstrap.com/examples/grid/

Can anyone help?

[paulsmith]

just answer my own question in case it helps anyone else. I included the fixes as instructed in this thread..
“http://community.protoshare.com/2014/04/getting-bootstrap-cdn-work-ie8/&#8221;
don’t understand it but it worked!!

[Rathius]

It’s working for me now.

I am using a local copy of respond.min.js and not linking to the CDN as has been suggested.

It would have been nice if they just had it commented in the source saying, “Hey, go download respond.min.js at the CDN listed below and make sure you upload it along with all your other js files in order for bootstrap to work correctly with IE8.”

DUH! How hard would that be? Sure would beat the hell out of searching all over the ‘Net for a solution.

Check this little screen capture.

https://youtu.be/4aSs4YJHRoQ

[Rohit701]

my site not working fine in IE8, here is the link http://www.9cityroofersandconstruction.com/

can you please help me ?

[devdavid]

I fixed this problem by linking the bootstrap css file locally. I thought because the @media statements came from bootstrap css that that must be why respond.js was having a problem with cross domain when using CDN for bootstrap. Now I think I will load the local file for IE 8 and below and the CDN for everything else.

[suhongyang]

We fixed the problem with 2 things:

1. Host respond.js and html5shiv.js locally (we use NPM for dependency management of these scripts)

2. Load html5shiv before CSS, and respond.js AFTER CSS is loaded.

Putting respond.js after CSS was the gotcha, as it needs to know about the CSS selectors before it can apply its effects.

Hope this helps.

[liamwheldon]

I found that the github example didn’t work when copied to my server. The solution I found was that the example when being tested with IE8 from XP needs 2 changes!

Replace “rawgithub.com” with “rawgit.com” (IE8/xp doesn’t like the redirect when including the css files)

Change “https” to “http” as the CDN they use uses SNI which isn’t supported in XP, so if you want to support XP users then you’ll need to cater for this! (or a less you spend a lot of money to get a dedicated IP on your CDN)

Once this was changed, all works well with the example :-) Hope this helps someone :-) Working example.html code below:

      <!DOCTYPE html>
      <html>
         <head>
            <meta charset="utf-8" />
            <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
            <meta name=”viewport” content=”width=device-width, initial-scale=1?>
            <title>Respond JS Test Page</title>
            <link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
            <link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
            <script src="../dest/respond.src.js"></script>
            <!-- Respond.js proxy on external server -->
            <link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
            <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
            <script src="respond.proxy.js"></script>
         </head>
         <body>
            <p>This is a visual test file for cross-domain proxy.</p>
            <p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
            <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
         </body>
      </html>

[Vincent CSS Lussier]

Joanne Masterson = Nicest Person In The World

[I.m.learning]

What I found out is I had to place this entire code into the head, removing any of it failed:

It looks you removed some of it, however.

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

As far as the comment @elvismercado , I believe it’s called “Conditional commenting.” I just heard of it when I started working with Bootstrap a few months ago.

But, IE8?

I wish 2 things: 1) they never got rid of XP {minus the security issues} 2) I never upgraded to Windows 10.

[Author]

Posts