Final cascaded rule does not work, always override by last Media Query

[simongcc]

I have the following styles:

@media (min-width: 768px) {
  .container {
    width: 750px;
    background: green;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
    background: blue;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
    background: orange;
  }
}

/* master override */
.container {
    width: 992px;
    background: red;
    margin: auto;
}

For some reasons, I have to override the container rule at the end while preserve the previous media query. In IE8, the final override does not work, it will be override by the last Media Query rules, ie, in the above example, it is 1170px. While in other browsers mentioned below, the final override work as expected, ie 992px.
Current work around is using keyword "!important".

Tested in IE8, latest Chrome / Firefox / Opera and Safari 5 in Windows 8.1

[henrahmagix]

I've noticed this too. The reason is because all the media queries are added after the stylesheet in which they were found. This changes the cascade, moving the media queries out of their current position to much later on.

I wonder if Respond could remove the stylesheet after parsing it and replace with it's custom <style>, which is constantly updated to include or exclude media query rules just like it currently does. Would that be too much work for IE, to reload the whole stylesheet every single time rather than just the media query rules?

[henrahmagix]

I have a fix in incuna#1. After internal review it will be pull-requested into this repo.

[henrahmagix]

See #345 for a fix