Ответ 1
Вместо того, чтобы обойти недостатки IE 7 и 8, вы можете заставить IE 7-8 фактически поддерживать медиа-запросы!
Я использую awesome Respond.js polyfill, чтобы включить медиа-запросы в IE 7 и 8. Просто добавьте этот код в свой HTML <head> и вам хорошо идти!
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Вы также можете включить селектора CSS3 в IE 7 и 8, чтобы материал вроде .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } работал.
Вам понадобится Selectivizr polyfill. Для ответа на работу вместе с Selectivizr, Selectivizr должен быть версии 1.0.3b или более поздней (которая еще не была удалена как стабильная в течение двух лет по какой-либо причине) и должен быть загружен до ответа. Selectivizr также требует NWMatcher или альтернативу для загрузки перед ним. Итак, правильный порядок:
<!--[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]-->
И вы также должны иметь html5shiv polyfill (aka html5shim), чтобы IE 7-8 поддерживал самый базовый CSS3 вещи.
Итак, мой окончательный набор IE-7-8 polyfills выглядит так:
<!--[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]-->
Примечание: не используйте IE9.js в сочетании с теми, которые заставляют IE 8 замораживаться.