Magento Respond.js似乎在ie8及以下版本中混合了样式

Question

I'm a little stumped by an issue where Repond.js seems to be mixing up magento Stylesheets in IE.

The issue: due to the way Magento imports its CSS respond.js confuses the order of stylesheets. When I use developer tools to troubleshoot the issue it is calling syles.css then custom.css then it appears to be calling styles.css again but acting as if they're inline and therefore overriding my custom.css styles. (I'm determining this because a search of the code shows that the specific styles are only being called in stlyes.css)

I can't link to the problem however I could really use some help if someone has been down this road before. Thanks in advance!

UPDATE: If I comment out line 45 in respond.src.js (the line that returns if media queries are supported) it breaks in every browser. This excludes this as an IE specific problem. Maybe this is caused by the way Magento calls its style sheets (XML File)?

UPDATE 2: By removing Custom.css and Respond.js from the magento XML call. My site is no longer breaking In IE. However I can't get media queries to work in IE8 and below. working on troubleshooting this issue now. Just a note: I'm not using @font-face calls in my css which is known to break respond.js in IE.

Answer 1

I've had a similar issue. I ended up specifying !important to the css properties so they overwrite any other styles no matter the order of the call stack.