For this site and Mason Law, I dropped the dependency of respond.js for IE8, 7 and 6. Since supporting these legacy browsers isn’t necessary, I used conditional comment to server a style sheet specifically for IE8 and below. The IE-specific CSS is the same as the blocks of media queries from the main CSS, but without the media queries.
The solution is not perfect because IE8 and below would have to download two CSS files, but it is still better than depending on respond.js. A more ideal approach would be to hide @media blocks from legacy browsers within the main stylesheet. I have been searching all over, but haven’t been able to find a hack for that. Does anyone know how to hide blocks of media queries in IE8, 7 & 6?