I have this problem that I can't seem to find a solution for...
I have a page that renders fine with native IE7 (not the emulated one from IE9/IE8) on the initial load, but falls back to IE6 Standard Mode on subsequent requests that get served from the browser cache. IE7 knows how to handle multiple CSS classes like "div.class1.class2", while IE6 Standard Mode does not - therefore my page breaks on every visit but the first.
Here's how to reproduce it:
- open up IE7 (the real one, IE7 Emulated Mode from IE9/IE8 won't work!)
- go to hhttp://beta.upcload.com/widget/popup?garmentId=workaholicfashion-5276777&sid=
- on the initial visit, everything should look nice and dandy (for example the blue button, like in Chrome or FF)
- reload the page now, several CSS rules break, because the browser falls back to IE6 Standard Mode (NOT Quirks Mode, I checked that one! document.compatMode is still "CSS1Compat")
- clear the cache and reload, everything looks nice again
- repeat as often as you like
So it seems to be that when the files all get served from the Amazon servers, IE7 renders them just fine, including CSS rules that contain multiple classes. (for example "div.class1.class2") When you try to reload the exact same page with the exact same code, it somehow switches to IE6 Standard Mode (not Quirks Mode), which doesn't understand chained CSS classes and breaks several designs, for example the buttons. I tried adding several different Doctype / Meta headers but they all make no difference, currently the page is XHTML Strict valid and has a X-UA-Compatible IE=edge header, but still fails to render properly when loaded from cache. The only difference in the headers I could make out was the missing Content-Type header for Not Modified requests, but that shouldn't be a problem, right?
Oh and to top it all off, when I open this exact same page with IE7 on my local development server, it renders just fine, even after a reload! :/
Update
Alright, so I was finally able to reproduce it on the development server. The only thing that was different there was the "max-age" header, causing the browser to not cache anything locally. When I increased the cache time, IE7 started caching those files, too which again caused a break in design, once they were loaded from cache. So it must be a problem with files being served from cache instead of from the server.
Update 2
I narrowed it down to the CSS file. It seems, that IE7 either renders it with IE6 mode when it comes from the cache (ie. no Content-Type header) and with IE7 mode when it gets loaded from the server. (Content-Type: text/css) Does anyone have an idea why that would be the case? Maybe some malformed CSS rules? As a workaround I now add a random parameter to the stylesheet to prevent caching, which prevents IE7 from switching to IE6 mode, but even after removing all errors and warnings from the stylesheet the problem persists.