Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!
I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go!
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.
You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:
<!--[if lt IE 9]>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.
So my ultimate set of IE 7-8 polyfills looks like this:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Note: don't use IE9.js in combination with those as it will make IE 8 freeze.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
