Rails, Foundation 4, Respond.js not working properly in IE8

Question

I have a Rails 3.2 project with Foundation 4 and I need to support Internet Explorer 8.

To enable the media queries in IE8 needed by the Foundation 4 grid I included Respond.js. I tested in IE8, but the layout remained the small devices layout. The respond.js testpage worked fine in IE8.

Why isn't the Foundation grid properly loaded in IE8?

Answer 1

I had the problem that IE8 doesn't seem to like the @import-property.

We used a global css file which imported the necessary styles. When moving all stylesheets to the assets pipeline via =* require custom.css it all started working

It's weird though, the regular bootstrap styling (buttons, backgrounds and such) got imported properly. The grid system was not. I guess Internet Explorer works in mysterious and retarded ways.

Answer 2

I previously enabled sass support in Google Chrome and had config.sass.debug_info = true in environments/development.rb and the resulting @media -sass-debug-info apparently aren't processed by respond.js.

Changing config.sass.debug_info to false, emptying the tmp/cache/ project folder and restarting the rails server solved this issue.

edit
Apparently I also have to set

config.sass.debug_info = false
config.sass.line_comments = false

to completely disable the sass debug media queries.