IE8 ignoring media queries w/ respond.js

Question

IE8 appears to be ignoring some CSS media queries despite Respond.js support. I wondered if it was due to certain operators being unsupported by Respond.js

For a particular element's width, here is the list of styles applied to it in order:

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
.modal-dialog {
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media only screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

On a desktop screen, I'd expect width to end up 75% and it does in all browsers but IE8 uses 600px. IE8 dev tools do show all rules are read, but they are overridden. Respond.js's support section explains its limitations and it's possible logical operators are not supported.

My questions are: (1) does Respond.js support logical operators including the "and"? (it doesn't seem so), and (2) if a valid media query is found by IE8/Respond.js, does it override everything else (like it does here)?

Answer 1

OK, I figured out the problem and it's actually an issue in how Respond.js adds CSS to the head element. I thought the order of the CSS in the stylesheet would stay the same, but Respond.js moves things around. The order of CSS in the head:

• Original stylesheets
• Respond.js CSS for media="screen"
• Respond.js CSS for media="all"
• Respond.js CSS for media="print"

Look at my original list of styles--the one that ends up last is @media (min-width: 480px)....

Respond.js does honor all CSS media queries and the operators, but anything with "screen" will be overridden by CSS without it.

Answer 2

The issue lies in the use of "only":

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Source: https://stackoverflow.com/a/8595600/1556245

Also, your cascading is looking pretty wonky and a lot of your queries are being overriden. This is what your styles should like like:

.modal-dialog {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
/*
  If this next media query is for print, specify that using the "print" media type.
  If it's for screens, delete it - it's being overriden by the next query.
*/
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
@media screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

Removing the word 'only' should do the trick, but I'd also recommend removing the superfluous queries per my example, just to avoid confusion.