If you've embraced a mobile-first approach to responsive design, you're probably building your CSS in layers. One common method is to start with a base layer of CSS that applies to all screen sizes -- like font definitions, colors, etc -- and then using CSS 3 @media queries to add in floats and the like for larger screens.
This approach works well with most browsers, except of course our old friend Internet Explorer, which, prior to IE 9, doesn't know what to make of @media. Naturally there are solutions to the IE 6/7/8 problem. You could use a polyfill like Respond.js or css3-mediaqueries.js, both of which use JavaScript to make media queries work in older web browsers.
Sometimes though you don't want the JavaScript dependency. What's more, most of the time you don't really even care if IE actually understands @media, you just want it to apply the CSS inside the @media block.
Developer Nicolas Gallagher recently outlined a different, JavaScript-free approach to making older versions of IE apply your @media rules. Gallagher's technique builds on an idea developer Jeremy Keith uses to work around a bug in Windows mobile. If you're looking for a simple, JavaScript-free means of serving up a mobile-first design without abandoning older versions of Internet Explorer, this is one of the best solutions I've seen (provided you're already using Sass).
Here's Gallagher's description:
Be sure to read through Gallagher's post for the full details on how and why it works. Obviously if you're not a fan of Sass, then this approach isn't for you (Less fans should check the comments on Gallagher's post as developer Peter Wilson has a link to a Less version of the same idea).
