Why does my page work in IE9's IE7 mode, but not in IE7 itself?

Question

I recently went live with our new home page, after heavily testing it in each of IE9\'s browser and document modes (not just compatibility mode, but actual IE7 and IE8

Answer 1

The problem seems to be with the slideshow

Glancing through your script.js file i see this

/*
 * Here is the slideshow code.
 */

 // Screw ie7...
if ( !($.browser.msie && $.browser.version <= 7.0) ){

so i would start my search there, as it seems to ignore IE7 and below..

Answer 2

May I recommend you avoid emulation approaches and test in actual IE7 on your machine by using XP Mode.

Answer 3

I don't know about IE9's IE7-compatibility mode but the IE7-compatiblity mode built into IE8 is well known for not being a perfect copy of a real IE7. It has a large number of bugs and quirks of its own which do not appear in normal IE7.

It was bad enough that I would never have recommended anyone to actually use compatibility mode to test their site... except that you still need to cope with the occasional user who is actually using compatiblity mode on their live browser. So rather than making things easier for the developer, MS actually made things harder for us by adding yet another possible rendering engine to the mix which. Sigh.

I haven't tried IE9's compatibility modes, but if your experience is anything to go by, then they've still got the same problem. It's a shame (but not surprising) that MS didn't learn from the first time they made that blunder.

Rather than using compatibility modes to test, the best solution I know of is to use an application called IE Tester, which allows you to install and run all versions of IE alongside each other. It's still not perfect (the only way you'll get perfect, as you've already discovered, is to have a real IE7 on its own real copy of XP), but it is much much closer to the real thing than IE's own 'compatiblity' mode.

Answer 4

Alrgiht, this maybe the answer ur looking for. Go to F12 developer tools and click IE9 browser mode and IE7 document mode It will be IE7 standards, but a IE9 useragent. If that doesn't work, try using IE7 browser mode and document mode.

Answer 5

I'm with the others in saying that the possible culprit is the slideshow. I would get a more CSS friendly slideshow:

http://flowplayer.org/tools/index.html

And definitely test in the ACTUAL browser! You could use an online browser check site like browsershots.org. They take aLONG time to produce a shot of your site, but it is accurate.

Answer 6

I would recommend using the HTML5BoilerPlate ( http://html5boilerplate.com/ ) as a source of inspiration and guidance. I am in the exact same situation: Web Developer for a university and have to write a main site redesign.

I think you already did this, based on your source. Are you using the latest version? Perhaps there have been some updates to the HTML5BoilerPlate template that would address this.

I found a co-worker with the real IE7 installed and sure enough, your page looks bad. I then checked out my mockup in the real IE7 and it looks OK (I consider my very lucky now).

My mockup is also based on the HTML5BoilerPlate template.

Another suggestion is to try commenting-out blocks of code and try to isolate the cause of the problem.

I think you slideshow is the cause of the problem (or at least the symptom). I have had to re-implement my slideshow content using 3 different plugins. Currently, I have settled on the jQuery cycle plugin for that kind of content: http://jquery.malsup.com/cycle/

I really want to know the cause the of the problem, too. The site looks great, by the way, when rendered the way it is supposed to look. Good job!

---

Checkout this MSDN blog posting: http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx