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    lt  -- Favicon -- gt   lt link rel  shortcut icon  href   favicon ico  gt   lt link rel  apple-touch-icon  href   apple-touch-icon png  gt    lt  -- Bootstrap -- gt   lt link href    netdna bootstrapcdn com bootstrap 3 0 0-rc1 css bootstrap css  rel  stylesheet  gt   lt link href    netdna bootstrapcdn com font-awesome 3 2 1 css font-awesome min css  rel  stylesheet  gt   lt script src   SiteFiles js modernizr js  gt  lt  script gt    lt  -- CSS -- gt   lt link href   SiteFiles css main css  rel  stylesheet  gt        lt header gt       lt div class  topArea clearfix  gt           lt div class  container  gt               lt div class  topLinks  gt                   lt div class  btn-group  gt                       lt span class  flag  data-toggle  dropdown  gt  amp nbsp  lt  span gt                       lt ul class  dropdown-menu  gt                           lt li gt  lt a href     gt Country 1 lt  a gt  lt  li gt                           lt li gt  lt a href     gt Country 2 lt  a gt  lt  li gt                           lt li gt  lt a href     gt Country 3 lt  a gt  lt  li gt                           lt li class  divider  gt  lt  li gt                           lt li gt  lt a href     gt Country 4 lt  a gt  lt  li gt                           lt li gt  lt a href     gt Country 5 lt  a gt  lt  li gt                           lt li gt  lt a href     gt Country 6 lt  a gt  lt  li gt                       lt  ul gt                   lt  div gt                   lt div class  visible-sm btn-group  gt                       lt div class  plus  data-toggle  dropdown  gt  lt i class  icon-plus icon-2x  gt  amp nbsp  lt  i gt  lt  div gt                       lt ul class  dropdown-menu  gt                           lt li gt  lt a href     gt Parts  amp  Service lt  a gt  lt  li gt                           lt li gt  lt a href     gt Store Locator lt  a gt  lt  li gt                           lt li gt  lt a href     gt Find a Service Centre lt  a gt  lt  li gt                           lt li gt  lt a href     gt Parts List lt  a gt  lt  li gt                           lt li gt  lt a href     gt Tool Vibration lt  a gt  lt  li gt                           lt li gt  lt a href     gt Resource Centre lt  a gt  lt  li gt                           lt li gt  lt a href     gt Media Centre lt  a gt  lt  li gt                           lt li gt  lt a href     gt Register your Tools lt  a gt  lt  li gt                           lt li gt  lt a href     gt About Us lt  a gt  lt  li gt                           lt li gt  lt a href     gt                               lt button type  button  class  btn btn-default  gt Where to Buy lt  button gt  lt  a gt  lt  li gt                       lt  ul gt                   lt  div gt                   lt div class  topNav  gt                       lt ul class  hidden-sm  gt                           lt li gt                               lt div class  btn-group  gt                                   lt a href     data-toggle  dropdown  gt Parts  amp  Service lt  a gt                                   lt ul class  dropdown-menu  gt                                       lt li gt  lt a href     gt Store Locator lt  a gt  lt  li gt                                       lt li gt  lt a href     gt Find a Service Centre lt  a gt  lt  li gt                                       lt li gt  lt a href     gt Parts List lt  a gt  lt  li gt                                       lt li gt  lt a href     gt Tool Vibration lt  a gt  lt  li gt                                   lt  ul gt                               lt  div gt                           lt  li gt                           lt li gt  lt a href     gt Resource Centre lt  a gt  lt  li gt                           lt li gt  lt a href     gt Media Centre lt  a gt  lt  li gt                           lt li gt  lt a href     gt Register your Tools lt  a gt  lt  li gt                           lt li gt  lt a href     gt About Us lt  a gt  lt  li gt                           lt li gt  lt a href     gt                               lt button type  button  class  btn btn-default  gt Where to Buy lt  button gt  lt  a gt  lt  li gt                       lt  ul gt                   lt  div gt                   lt div class  searchArea  gt                       lt input type  text    gt                       lt a href     class  goBtn  gt GO lt  a gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt div class  mainNavArea  gt           lt div class  container rel  gt                lt div class  logo  gt                   lt img src   SiteFiles img logo png  title  Milwaukee - Nothing but heavy duty  alt  Milwaukee - Nothing but heavy duty    gt               lt  div gt               lt div class  navi  gt                   lt div class  navbar  gt                       lt div class  container  gt                            lt  --  navbar-toggle is used as the toggle for collapsed navbar content -- gt                           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-responsive-collapse  gt                               lt span class  icon-bar  gt  lt  span gt                               lt span class  icon-bar  gt  lt  span gt                               lt span class  icon-bar  gt  lt  span gt                           lt  button gt                            lt  -- Place everything within  navbar-collapse to hide it until above 768px -- gt                           lt div class  nav-collapse collapse navbar-responsive-collapse  gt                               lt ul class  nav nav-justified  gt                                   lt li gt  lt span class  dropArrow  gt  amp nbsp  lt  span gt  lt span class  topNavPosition  gt Power Tools lt  span gt                                        lt div class  navDrop  gt                                           lt div class  navDropInner  gt                                               lt div class  row  gt                                                   lt div class  hidden-sm col-sm-4 col-lg-4  gt                                                       lt img src   SiteFiles img drill jpg  alt      gt                                                   lt  div gt                                                   lt div class  col-12 col-sm-8 col-lg-8  gt                                                       lt h2 gt Power Tools lt  h2 gt                                                       lt div class  row  gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Cutters lt  a gt                                                               lt a href     gt Levels lt  a gt                                                               lt a href     gt Pliers lt  a gt                                                               lt a href     gt Saws lt  a gt                                                               lt a href     gt Screwdrivers lt  a gt                                                           lt  div gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Snips lt  a gt                                                               lt a href     gt Utility Knives lt  a gt                                                               lt a href     gt Combo Knives lt  a gt                                                               lt a href     gt Hand Tool Accessories lt  a gt                                                           lt  div gt                                                       lt  div gt                                                   lt  div gt                                               lt  div gt                                           lt  div gt                                           lt a href     class  closeNav  gt X lt  a gt                                       lt  div gt                                   lt  li gt                                   lt li gt  lt span class  dropArrow  gt  amp nbsp  lt  span gt  lt span class  topNavPosition  gt Hand Tools lt  span gt                                        lt div class  navDrop  gt                                           lt div class  navDropInner  gt                                               lt div class  row  gt                                                   lt div class  hidden-sm col-sm-4 col-lg-4  gt                                                       lt img src   SiteFiles img drill jpg  alt      gt                                                   lt  div gt                                                   lt div class  col-12 col-sm-8 col-lg-8  gt                                                       lt h2 gt Hand Tools lt  h2 gt                                                       lt div class  row  gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Cutters lt  a gt                                                               lt a href     gt Levels lt  a gt                                                               lt a href     gt Pliers lt  a gt                                                               lt a href     gt Saws lt  a gt                                                               lt a href     gt Screwdrivers lt  a gt                                                           lt  div gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Snips lt  a gt                                                               lt a href     gt Utility Knives lt  a gt                                                               lt a href     gt Combo Knives lt  a gt                                                               lt a href     gt Hand Tool Accessories lt  a gt                                                           lt  div gt                                                       lt  div gt                                                   lt  div gt                                               lt  div gt                                           lt  div gt                                           lt a href     class  closeNav  gt X lt  a gt                                       lt  div gt                                   lt  li gt                                   lt li gt  lt span class  dropArrow  gt  amp nbsp  lt  span gt  lt span class  topNavPosition  gt Test  amp  Measurement lt  span gt                                        lt div class  navDrop  gt                                           lt div class  navDropInner  gt                                               lt div class  row  gt                                                   lt div class  hidden-sm col-sm-4 col-lg-4  gt                                                       lt img src   SiteFiles img drill jpg  alt      gt                                                   lt  div gt                                                   lt div class  col-12 col-sm-8 col-lg-8  gt                                                       lt h2 gt Test  amp  Measurement lt  h2 gt                                                       lt div class  row  gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Cutters lt  a gt                                                               lt a href     gt Levels lt  a gt                                                               lt a href     gt Pliers lt  a gt                                                               lt a href     gt Saws lt  a gt                                                               lt a href     gt Screwdrivers lt  a gt                                                           lt  div gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Snips lt  a gt                                                               lt a href     gt Utility Knives lt  a gt                                                               lt a href     gt Combo Knives lt  a gt                                                               lt a href     gt Hand Tool Accessories lt  a gt                                                           lt  div gt                                                       lt  div gt                                                   lt  div gt                                               lt  div gt                                           lt  div gt                                           lt a href     class  closeNav  gt X lt  a gt                                       lt  div gt                                   lt  li gt                                   lt li gt  lt span class  dropArrow  gt  amp nbsp  lt  span gt  lt span class  topNavPosition  gt Accessories lt  span gt                                        lt div class  navDrop  gt                                           lt div class  navDropInner  gt                                               lt div class  row  gt                                                   lt div class  hidden-sm col-sm-4 col-lg-4  gt                                                       lt img src   SiteFiles img drill jpg  alt      gt                                                   lt  div gt                                                   lt div class  col-12 col-sm-8 col-lg-8  gt                                                       lt h2 gt Accessories lt  h2 gt                                                       lt div class  row  gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Cutters lt  a gt                                                               lt a href     gt Levels lt  a gt                                                               lt a href     gt Pliers lt  a gt                                                               lt a href     gt Saws lt  a gt                                                               lt a href     gt Screwdrivers lt  a gt                                                           lt  div gt                                                           lt div class  col-6 col-sm-6 col-lg-6  gt                                                               lt a href     gt Snips lt  a gt                                                               lt a href     gt Utility Knives lt  a gt                                                               lt a href     gt Combo Knives lt  a gt                                                               lt a href     gt Hand Tool Accessories lt  a gt                                                           lt  div gt                                                       lt  div gt                                                   lt  div gt                                               lt  div gt                                           lt  div gt                                           lt a href     class  closeNav  gt X lt  a gt                                       lt  div gt                                   lt  li gt                               lt  ul gt                           lt  div gt                           lt  --   nav-collapse -- gt                       lt  div gt                       lt  --   container -- gt                   lt  div gt                   lt  --   navbar -- gt               lt  div gt            lt  div gt       lt  div gt   lt  header gt

User · Answer

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

User · Answer

Don t forget to place your css links in the  lt head gt  as respond js takes only those

User · Answer

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    lt meta http-equiv  X-UA-Compatible  content  IE edge  gt    2 - Use the non-minified bootstrap css  instead of bootstrap min css   lt link href   css bootstrap css  rel  stylesheet    gt    3 - Add the respond js  and html5shiv js    lt  -- if lt IE 9  gt     lt script src   js html5shiv min js  gt  lt  script gt     lt script src   js respond min js  gt  lt  script gt   lt   endif -- gt

User · Answer

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

User · Answer

Needed to add -  lt meta http-equiv  X-UA-Compatible  content  IE edge  gt   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

User · Answer

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

User · Answer

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

User · Answer

Use this solution    lt  -- if lt IE 9  gt   lt script src  js css3-mediaqueries js  gt  lt  script gt   lt link rel  stylesheet  type  text css  href  css bootstrap-ie7 css    gt   lt   endif -- gt    This string  lt script src  js css3-mediaqueries js  gt  lt  script gt  enable mediaqueries  This string  lt link rel  stylesheet  type  text css  href  css bootstrap-ie7 css    gt  enable bootstrap fonts   Tested on Bootstrap 3 3 5  Link to download  mediaqieries js  Link to download  bootstrap-ie7 css

User · Answer

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  lt meta http-equiv  X-UA-Compatible  content  IE edge  gt    3 2    lt  -- if lt IE 9  gt     lt script src  js html5shiv js  gt  lt  script gt   lt   endif -- gt      using cdn bootstrap from theme setting   To learn more  review my website blog for drupal design and development www devangsolanki com

User · Answer

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  lt meta http-equiv  quot X-UA-Compatible quot  content  quot IE edge quot  gt  do

User · Answer

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

User · Answer

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

User · Answer

my head tag is like this    lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt  -- Bootstrap core CSS -- gt       lt link href  css modern-business css  rel  stylesheet  gt       lt link href  font-awesome css font-awesome min css  rel  stylesheet  gt       lt link href  css bootstrap css  rel  stylesheet  media  screen  gt       lt script src  js jquery js  gt  lt  script gt       lt script src  js bootstrap min js  gt  lt  script gt       lt script src  js modern-business js  gt  lt  script gt        lt  -- if lt IE 9  gt         lt script src  js html5shiv js  gt  lt  script gt         lt script src  js respond js  gt  lt  script gt       lt   endif -- gt     lt  head gt    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

User · Answer

If you use Bootstrap 3 and everything works fine on other browsers except IE  try the below    lt meta http-equiv  X-UA-Compatible  content  IE edge    gt    lt  -- HTML5 Shim and Respond js IE8 support of HTML5 elements and media queries -- gt   lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt   lt  -- if lt IE 9  gt   lt script src  https   oss maxcdn com libs html5shiv 3 7 0 html5shiv js  gt  lt  script gt   lt script src  https   oss maxcdn com libs respond js 1 3 0 respond min js  gt  lt  script gt   lt   endif -- gt

User · Answer

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   lt meta http-equiv  X-UA-Compatible  content  IE edge  gt    Put this right after I d loaded my css    lt  -- if lt IE 9  gt         lt script src    Content compatibility html5shiv js  gt  lt  script gt       lt script src    Content compatibility respond min js  gt  lt  script gt   lt   endif -- gt    and then change    lt nav class  navbar  role  navigation  gt   lt  nav gt    to   lt header class  navbar  role  navigation  gt   lt  header gt    Oh and for good measure I also added   lt meta name  viewport  content  width device-width  initial-scale 1 0  gt    simply because that s what the Bootstrap site itself has

User · Answer

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    lt  -- HTML5 shim and Respond js IE8 support of HTML5 elements and media queries -- gt   lt  -- if lt IE 9  gt     lt script src        assets js html5shiv js  gt  lt  script gt     lt script src        assets js respond min js  gt  lt  script gt   lt   endif -- gt

User · Answer

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    lt  -- HTML5 Shim and Respond js IE8 support of HTML5 elements and media queries -- gt   lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt   lt  -- if lt IE 9  gt   lt script src  https   oss maxcdn com libs html5shiv 3 7 0 html5shiv js  gt  lt  script gt   lt script src  https   oss maxcdn com libs respond js 1 3 0 respond min js  gt  lt  script gt   lt   endif -- gt   lt  body gt   lt  html gt

User · Answer

I also had to set the following META tag    lt meta http-equiv  X-UA-Compatible  content  IE edge  gt

User · Answer

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

User · Answer

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

User · Answer

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   lt  DOCTYPE html gt   lt html lang  es  gt        If the blank line is between the DOCTYPE and the  tag  the problem is also shown    lt  DOCTYPE html gt   blank line   lt html lang  es  gt    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  -

User · Answer

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    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  lang  en  gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt       lt meta http-equiv  X-UA-Compatible  content  IE edge    gt       lt meta name  viewport  content  width device-width  initial-scale 1    gt        lt title gt Bootstrap Test for IE8 lt  title gt        lt  -- Moved these two lines up -- gt        lt link href  includes css bootstrap css  type  text css  rel  stylesheet    gt       lt script src  includes js bootstrap js  gt  lt  script gt        lt  -- if lt IE 9  gt         lt script src  includes js html5shiv js  gt  lt  script gt         lt script src  includes js respond min js  gt  lt  script gt       lt   endif -- gt       lt  head gt   lt body gt       lt div class  container  gt           lt div class  row  gt               lt div class  col-md-4  style  background-color red   gt col-md-4 lt  div gt               lt div class  col-md-8  style  background-color green   gt col-md-8 lt  div gt           lt  div gt       lt  div gt   lt  body gt   lt  html gt

[html] IE8 issue with Twitter Bootstrap 3

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to internet-explorer-8

Examples related to twitter-bootstrap-3