IE11 - Ignoring all @media queries - Bootstrap

Question

I am using bootstrap to build a very simple 3 columns row. Using Chrome everything shows as expected (3 columns in a row). When I view the same page in IE11 I get 3 rows (it's stacking the 3 columns on top of each other.

<div class="row">
    <!--P3U wekly bar chart-->
    <div class="col-sm-4">                      
        Test1
    </div>

    <div class="col-sm-4">                      
        Test2
    </div>

    <div class="col-sm-4">                      
        Test3
    </div>

</div>

Comparing both in dev mode, I noticed that Chrome has a few @media queries to handle the width of the col-sm-4 classes for example:

@media (min-width: 768px)
.col-sm-4 {
  width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
  float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

None of this CSS shows up in IE11, seems like its ignoring this portion. For the heck of it I manually added these CSS codes to the IE11 and everything started to get into place correctly. Now I assume that there is a special method for certain CSS code to work in IE11 but looking all over the web, couldn't find some clear answer.

Added to my page the Response.js scripts that are used for IE8 pages to see if that would make a difference but it didnt.

Would anyone have any idea what im missing here?

score 1 · Answer 1 · answered Mar 21 '16 at 17:32

1

Brackets are missing I suppose :

@media (min-width: 768px){
  .col-sm-4 {
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-   sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
    float: left;
  }
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

answered Mar 21 '16 at 17:32

Vincent G

8,547
1
18
36

Checked my bootstra.css and the brackets are there. For some reason copying from Chrome dev tool dosent copy the brackets. – Daniel Ellison Mar 21 '16 at 17:39
Maybe check this one : http://stackoverflow.com/questions/22083493/internet-explorer-11-using-media-query-css – Vincent G Mar 21 '16 at 17:47
Tried adding @media all and but didnt make any difference. – Daniel Ellison Mar 21 '16 at 18:00
2

See here http://getbootstrap.com/getting-started/#template Have you got these two lines on the top : – Vincent G Mar 21 '16 at 18:13
Dosen`t seem to make to change anything. – Daniel Ellison Mar 21 '16 at 18:18
I've created a JSfiddle : https://jsfiddle.net/gLfg8avw/2/ Does this work for you ? – Vincent G Mar 21 '16 at 18:38
Yeah using the JSfiddle it seems to be ok. Ive been playing around wit the compatibilities and found out that by default it was running on IE8 mode instead of edge. Seems to be okay after I switch it now. Unfortuantely it seems that our IT dep forced the compatibility IE8 mode so I need to figure out how to work around this. – Daniel Ellison Mar 21 '16 at 19:59
Oh ok, maybe check with your IT dep then. – Vincent G Mar 21 '16 at 20:05

score 0 · Answer 2 · answered Jul 20 '18 at 03:02

I have made this an answer because it worked for me. The comment made by Vincent G worked like a dream for me.

This answer assume you have created a separate page for the printing.

Remove all other meta tags from your html document
Add the following meta tags (sorry this is an image as the code block did not work)

IE11 - Ignoring all @media queries - Bootstrap

2 Answers2