Rollback IE7 to IE6 standard mode when rendering CSS from cache

Question

I have this problem that I can not find a solution for ...

I have a page that is perfectly debugged using native IE7 (not emulated from IE9 / IE8) at boot, but returns to the IE6 standard in subsequent requests that will be served from the browser cache. IE7 knows how to handle several CSS classes, such as "div.class1.class2", while in IE6 standard mode it doesn't - that's why my page breaks on every visit, but the first one.

Here's how to reproduce it:

• open IE7 (real, IE7 Emulated Mode from IE9 / IE8 will not work! )
• go to hhttp: //beta.upcload.com/widget/popup? garmentId = workaholicfashion-5276777 & sid =
• on the first visit, everything should look beautiful and dandy (for example, a blue button, for example, in Chrome or FF).
• reload the page, now some CSS rules break because the browser returns to IE6 standard (NOT Quirks mode, I checked it! document.compatMode is still "CSS1Compat")
• clear the cache and reload, everything looks good again.
• repeat as often as you like

So, it seems that when all files are served from Amazon servers, IE7 makes them just fine, including CSS rules that contain several classes. (for example, "div.class1.class2"). When you try to reload the same page using the same code, it somehow switches to IE6 Standard Mode (not Quirks mode), which does not understand chained CSS classes and breaks down several designs, such as buttons. I tried to add several different Doctype / Meta headers, but all of them have no meaning, the XHTML Strict page is currently valid and has an IE = edge header compatible with X-UA, but still cannot display it correctly when loading from cache. The only difference in the headers I could make out was the lack of a Content-Type header for Not Modified requests, but that shouldn't be a problem, right?

Oh, and above all, when I open this same page with IE7 on my local development server, it looks great even after a reboot!: /

Update

Ok, so I was finally able to play it on the development server. The only thing that was different was the "max-age" header, as a result of which the browser did not cache anything locally. When I increased the caching time, IE7 started caching these files, which also caused a break in the design as soon as they were loaded from the cache. Thus, the problem should be related to the fact that the files are being downloaded from the cache, and not from the server.

Update 2

I narrowed it down to a CSS file. It seems that IE7 either displays it in IE6 mode when it comes from the cache (i.e. there is no Content-Type header), and in IE7 mode when it boots from the server. (Content-Type: text / css) Does anyone have an idea why this is so? Perhaps some wrong 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 remains.

Answer 1

Not so long ago, I experienced the exact opposite behavior while supporting an outdated IE6 application.

Anyway, use xhtml 1.0 strict doctype, this is an important start!

First: regular checklist:

• (generated) (X) HTML files / data are sent / saved without specification, and not one byte before the DTD?
• Have you checked which settings were sent by the server that sent the file?
• Is the document content type "text / html" or XML ("application / xhtml + xml" or "application / xml") (in markup-source = meta tag and / or sent by server = header)?
• Does the page work with (or chat with) the domain in the Microsoft blacklist (where IE fallbackmode is not allowed)?
• Have you checked the differences in IE security settings between lan / intRAnet and wan / intERnet (since you mentioned a different behavior)?
• Is it possible a proxy server through which you also connect the Internet (which can rewrite something?)

Now this data is ready and visit the absolute best source when switching your browser . I ALWAYS saw, in the fact that every self-respecting web-dev book should cover this in the first chapters. All this good on one clear page, it "enlightens", to say the least.
People should know that there are two parts to switching in browser mode and understand when to expect what kind of behavior.
On the same page, you will also find an IE mode switching scheme that gives an idea of ​​the extended maze that IE follows in order to determine its final rendering / browser-mode.

Hope this helps!

UPDATE:
NO NO IE6 (standard / quirk) mode (in newer versions of IE). See Microsoft Official Documentation (and an updated link with this quote) !! Let me even quote:

Windows Internet Explorer 7 introduced new features that were designed to more fully support industry standards, such as support for the universal selector. Since the directive only supports two settings (quirks mode and standard mode), IE7 standards mode is replaced by Internet Explorer 6 standards mode.

And here is the code to test their doctype-switch (source on the same page):

engine = null; if (window.navigator.appName == "Microsoft Internet Explorer") { // This is an IE browser. What mode is the engine in? if (document.documentMode) // IE8 or later engine = document.documentMode; else // IE 5-7 { engine = 5; // Assume quirks mode unless proven otherwise if (document.compatMode) { if (document.compatMode == "CSS1Compat") engine = 7; // standards mode } // There is no test for IE6 standards mode because that mode // was replaced by IE7 standards mode; there is no emulation. } // the engine variable now contains the document compatibility mode. } 

Now READ comments in Microsoft code above !!!!

About your second update:
Good find about caching! So the css problem now. As you begin to understand why legacy IE6 applications need IE6 (the reason IE6 is so hard to kill), you might want to take a look at the conditional comments , since:

• they are not hacked (but as SDC noted in the comments, Microsoft removed them from IE10 forward)
• there is no javascript browser browser (even without a script it MUST be activated, therefore it always works),
• and it can specifically configure (range) versions of IE exclusively.

In them you can specify a link to IE css (keeping the document small, thin and uncluttered) ...