IE8 issue with Twitter Bootstrap 3

Question

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.

In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.

I also notice that the container class does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

Welcome. Please post the code in the question as well. This will help anyone looking at this question in future years when your link doesn't work any more. — Mark Chorley, Jul 30 '13 at 13:00

score 260 · Accepted Answer · edited Mar 07 '14 at 01:07

260

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

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

edited Mar 07 '14 at 01:07

Chris Simmons

6,326
5
29
45

answered Jul 30 '13 at 21:13

Bass Jobsen

47,890
16
139
218

Please forgive me if I'm being obtuse...but `respond.js` ?? – Chris Kempen Aug 02 '13 at 11:18
6

Apologies, I always seem to find the appropriate solution _after_ posting ridiculous questions...check out http://getbootstrap.com/getting-started/ (specifically under the "Internet Explorer 8 and 9" section). :) – Chris Kempen Aug 02 '13 at 11:21
1

Which files should be existed locally, which ones can be used from CDN ? bootsrap.css, bootstrap.js, respond.js, html5shiv.js files ? – trante Sep 27 '13 at 06:09
3

a local respond.js only works with local copy of bootstrap (same domain), see here https://github.com/scottjehl/Respond#cdnx-domain-setup – Bass Jobsen Sep 27 '13 at 06:16
To be clear, it's your Bootstrap CSS file that needs to be local, not the HTML5shiv or respond.js scripts. In fact, when I downloaded those two scripts from GitHub and hit them locally, IE8 didn't behave. All was resolved once I switched to serving them from oss.maxcdn.com a la the Bootstrap documentation. – technoTarek Nov 23 '13 at 14:13
6

Also note that Respond.js needs to be defined after the css file which contains the media queries. Otherwise, they will not be processed in IE8 – helios456 Apr 09 '14 at 12:03
if you happen to be using (yeoman grunt bower angularjs) and all this isn't working set compass>server>options>debugInfo to false in your gruntfile. Apparently it adds a bunch of stuff to your css that causes all this to not work. . – Lee May 22 '14 at 18:45
Also make sure that your CSS comes before the conditional JS scripts. – John Magnolia Oct 07 '15 at 09:08
I am using: `
` to show an image where: `left-finger-picker` is as follows: `.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }` however, it is not responsive in IE8
– Hosein Aqajani Dec 04 '16 at 12:46

score 62 · Answer 2 · answered Aug 05 '13 at 09:47

62

I also had to set the following META tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

answered Aug 05 '13 at 09:47

Damian

629
4
2

I am using: `
` to show an image where: `left-finger-picker` is as follows: `.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }` however, it is not responsive in IE8
– Hosein Aqajani Dec 04 '16 at 12:46

Giles Roberts · Answer 3 · 2013-10-11T09:05:40.493

I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Put this right after I'd loaded my css:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

and then change

<nav class="navbar" role="navigation">
</nav>

to

<header class="navbar" role="navigation">
</header>

Oh and for good measure I also added

<meta name="viewport" content="width=device-width, initial-scale=1.0">

simply because that's what the Bootstrap site itself has.

I am using: `
` to show an image where: `left-finger-picker` is as follows: `.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }` however, it is not responsive in IE8 — Hosein Aqajani, Dec 04 '16 at 12:45

score 14 · Answer 4 · answered Dec 03 '13 at 15:17

14

In my case, the bootstrap minified CSS was causing the issue. To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:

1 - Set the X-UA-Compatible flag.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - Add the respond.js (and html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

answered Dec 03 '13 at 15:17

pedrusky

236
2
4

In my case also, the bootstrap minified CSS was causing the issue in IE8. – hrvoj3e Apr 28 '14 at 10:08
I am using: `
` to show an image where: `left-finger-picker` is as follows: `.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }` however, it is not responsive in IE8
– Hosein Aqajani Dec 04 '16 at 12:47

score 6 · Answer 5 · answered Jul 30 '13 at 12:39

6

put respond.js at bottom of page but before closing body tag and here is link of respond.js and run this code in your localhost.

https://github.com/scottjehl/Respond

answered Jul 30 '13 at 12:39

jignesh kheni

1,150
1
7
22

Thanks for this, forgot to mention though, this is already included in my plugins.js file. – wrayvon Jul 30 '13 at 12:41
Important thing is that `respond.js` should be loaded _after_ the stylesheets. – piotr_cz Jul 07 '15 at 16:29

score 6 · Answer 6 · answered Dec 18 '13 at 02:21

6

Just in case. Make sure you load the IE specific js files after you load your css files.

answered Dec 18 '13 at 02:21

TenJack

1,516
4
19
32

score 5 · Answer 7 · answered Sep 27 '13 at 15:18

5

Don't forget to place your css links in the <head> as respond.js takes only those.

answered Sep 27 '13 at 15:18

Angel Yordanov

2,507
1
19
18

score 5 · Answer 8 · answered Dec 06 '13 at 10:14

As previously stated there are two different problems: 1) IE8 doesn't support media queries 2) respond.js used in conjunction with cross-domain css files must be included as described before.

If you want to use BootstrapCDN here's a working example:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Also make sure to copy respond.proxy.gif, respond.min.js and response.proxy.js in local directories

score 4 · Answer 9 · answered May 08 '14 at 20:05

After verifying:

DOCTYPE
X-UA-Compatible meta tag
Inclusion of html5shiv.js and respond.js (and downloading the latest versions)
respond.js being local
Hosting site from a web server and not from File://
Not using @import
...

Still col-lg, col-md, and col-sm were not working. Finally I moved the references to bootstrap to be before the references to html5shiv.js and respond.js and it all worked.

Here is a snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

Moving bootstrap.min.css as advised here was necessary to resolve my issue. I only moved the .css file, the .js still file still loads afterward. — Chad McGrath, May 17 '14 at 16:52
Moving my compiled CSS file (including Bootstrap) above html5shim and respond was the solution for me - thanks — Friendly Code, Jan 13 '15 at 09:26

score 2 · Answer 10 · edited May 23 '17 at 12:26

From the explanation it says that IE8 is the standard version for you and making content="IE=edge" will render the page in the highest mode. To make it compatible change it to content="IE=8".

IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

Reference What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

score 1 · Answer 11 · edited Oct 21 '13 at 00:15

1

Needed to add - <meta http-equiv="X-UA-Compatible" content="IE=edge">

I was using Bootstrap 3 - had it working on IE on my local.

I put it live didn't work in IE.

Just Bootstrap doesn't include that line of code in their templates, I'm not sure why but it might be due to it not being W3C compatible.

edited Oct 21 '13 at 00:15

chappjc

29,576
6
70
120

answered Oct 20 '13 at 23:57

Getsomepeaches

951
1
8
17

score 1 · Answer 12 · answered Jan 03 '15 at 00:22

I have a fix for this issue. Actually IE7 and 8 doesnt support the @media properly and if you check the css for “col-md-*” classes and there width is given in media width 992px. Just create a new css file IE eg: IE.css and add in the conditional comments. And then just copy the classes required for your design directly with any media queries there and you are done.

score 0 · Answer 13 · answered Jul 30 '13 at 16:54

0

I had exactly the same problem when migrating from bootstrapv2 to v3.

If (like me) you migrated by replacing the old spanX with col-sm-X you also need to add col-X classes. col-X are the styles that are outside of any @media blocks so they work without media query support.

To fix the container width you can set it yourself outside of a @media block. Something like:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

answered Jul 30 '13 at 16:54

andyberry88

1,704
15
16

Ok, so found out that doesn't 100% solve the problem since the col-X classes are then used for mobile devices. Back to the drawing board... – andyberry88 Jul 30 '13 at 19:28
col-X classes will never stack, so you solution will have problems on small devices. You solution also don't fix problems with the @grid-float-breakpoint which also depends on media queries so b.e. your navbar won't become horizontal. See also: http://stackoverflow.com/a/17920693/1596547 – Bass Jobsen Jul 30 '13 at 21:22

score 0 · Answer 14 · answered Oct 30 '13 at 16:49

I've suffer the same problem in IE 10.0. I know this is not exactly the problem in the OP, but maybe it will be usefull for others.

In my case, I had an empty line at the beginning of the document:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

If the blank line is between the DOCTYPE and the tag, the problem is also shown:

<!DOCTYPE html>
[blank line]
<html lang="es">

Once I've removed the blank line, and without the magic X-UA-Compatible meta, IE 10 has started to render the site correctly.

If you are using PHP and Smarty be careful with your Smarty comments because they will add those problematic blank lines :-)

score 0 · Answer 15 · edited Jan 21 '14 at 07:16

my head tag is like this:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

if you want to try in local...try through localhost, or create a QA server and set the content and try.

We need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as IE has security restriction. :P

score 0 · Answer 16 · answered Jan 22 '14 at 12:14

I've read every comment here, tried everything.. but couldn't get it to work with Windows 7 - Internet Explorer 11 (with document mode: IE8).

Then it came to mind that running a document mode (IE8) isn't the same as the real IE8, so I installed Windows Virtual PC (Windows 7 with Internet Explorer 8) and tadaaaa... it works like a charm!

I've put this piece of code JUST at the bottom of the page to make it work:

<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Respond.js and the proxy files are also hosted on cdnjs.cloudflare.com. check out http://cdnjs.com/libraries/respond.js/ for docs/links, and bootstrap 3.03 is also hosted there: http://cdnjs.com/libraries/twitter-bootstrap/ — Troy Morehouse, Jan 30 '14 at 03:56

vutbao · Answer 17 · 2014-05-21T16:50:51.143

0

If you use Bootstrap 3 and everything works fine on other browsers except IE, try the below.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

edited May 21 '14 at 16:50

answered Jan 22 '14 at 23:24

vutbao

133
2
6

Hi Phill Healy, the solution that I posted worked for me. Your comment is not constructive. You have to provide more details if you want help – vutbao May 14 '14 at 20:04
1

@vutbao bootstrap works on versions >IE8. If you want it to work in IE8 you need to addin respondjs BUT repondjs WILL NOT WORK if you are using bootstrap CDN. take time to read Bass Jobsen's answer. – Wreeecks May 15 '14 at 04:47
@Vutbao, to say that your answer is THE definitive answer to all Bootstrap 3 issues of this nature is not correct. Yet, that is what your answer says. As bwaaaaaa indicates there are many issues to consider. Another issue for example might be the document is in quirks mode, etc. – Phill Healey May 16 '14 at 12:20
Point taken. I will be more careful with the wording. Thanks – vutbao May 21 '14 at 16:49

score 0 · Answer 18 · answered Mar 09 '14 at 14:26

Just as a heads up. I had the same problem and none of the above fixed it for me. Eventually I found out that respond.js doesn't parse CSS referenced via @import. I had the whole bootstrap.min.css imported via @import into my main.css.

So make sure you don't have any CSS that contains your media queries referenced via @import.

score 0 · Answer 19 · answered Mar 28 '14 at 04:13

0

I have resolved below steps.

(1) installed Respond.js module for drupal 7. (2) lessphp module for drupal 7 set in libraries, instead of module folder. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

using cdn bootstrap from theme setting.

To learn more, review my website blog for drupal design and development www.devangsolanki.com

answered Mar 28 '14 at 04:13

user3471193

26
2

1

How are steps 1 and 2 even related to the question? The issue is with IE8 and bootstrap. Drupal isn't even mentioned in the question. – Adam Zuckerman Mar 28 '14 at 04:46

score 0 · Answer 20 · answered Nov 02 '15 at 17:29

Use this solution

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

This string <script src="js/css3-mediaqueries.js"></script> enable mediaqueries. This string <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> enable bootstrap fonts.

Tested on Bootstrap 3.3.5

Link to download mediaqieries.js. Link to download bootstrap-ie7.css

score 0 · Answer 21 · answered Feb 26 '16 at 09:30

Make sure you link the bootstrap source separately

If you use LESS or SASS don't be to greedy with compiling the styles. In my project I included bootstrap.min.css in my main style, on the top of the file - so there should be only one request for all styles.

And because of that, the boostrap classes did not work properly. When added separately, works as expected.

score 0 · Answer 22 · answered Oct 20 '16 at 11:30

I faced the same problem, tried the first answer but something was missing.

If you guys are using Webpack, your css will be loaded as a style tag which is not supported by respond.js, it needs a file, so make sure bootstrap is loaded as a css file

Personally I used extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Hope it will help you

IE8 issue with Twitter Bootstrap 3

22 Answers22

Make sure you link the bootstrap source separately

Linked

Related