为什么我的页面在IE9的IE7模式下工作，而在IE7本身却没有？

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 emulation). The site works in each mode, not to mention modern browsers. However, after it launched I got an email that said the site was very broken in IE7. I went to an abandoned machine and booted up Windows XP, started IE7, and loaded the page. To my horror, the layout was indeed broken! (NOT just the slideshow!)

Most importantly, why does my page not work in IE7, even though it works in IE7 mode in IE9? And as a secondary question, what might be "wrong" with it?

Edit : I have figured out that one of my problems may be the slideshow, but adding .ie7 #slideshow {display:none !important} won't even hide the slideshow. I can't access it via CSS.

Edit 2 : There is another problem that only shows up in native IE7 -- the footer on that home page, and this page , is ultra-tiny text that can't be zoomed. It doesn't do this in IE9's IE7 mode (not compatibility), or in any other browser. Another example of the discrepancy.

Answer 1

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 2

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

Answer 3

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 4

Download the free Microsoft Virtual PC and MS's free Hard Drive images containing IE 7, 8, etc... that's why they make these available.

There seems to be a million jQuery slideshow plugins and most are compatible with IE 7.

jCarousel is one and you can change it with CSS to look like what you have now.

This page contains 42 various slide-show plugins.

---

EDIT:

I also recommend that the page be brought into W3C compliance before tackling the other issues.

Answer 5

我建议您使用XP Mode避免仿真方法并在机器上的实际IE7中进行测试。

Answer 6

First: always test on the actual browser. If we're talking about ie, use a virtual machine to test it. Never rely on "compatibility modes", "ies4linux", "ies4mac", "just use wine" and such. I've had a lot, but a LOT of headaches when not using virtual machines (you can use snapshots on your virtual machines - each snapshot is a browser version. This way you can have only one image but with multiple browsers).

Second: do this problem happens even if you remove that slideshow section from your script.js? Did you check if, after removing that section and reloading your page if it isn't a cached version of the old script.js? Sometimes a cached version is the source of all problems.

A little hack to fool your browser into not caching script.js is to add, when calling script.js from your markup, an arbitrary number (script.js?v=100 for example, and for each modification you do with your js, you modify this number. You can check SO's source, it uses a similar approach in some sections).

Third: try to do, before the "negation" in your script:

alert($.browser.msie);
alert($.browser.version);
alert($.browser.msie && $.browser.version <= 7.0);

...and see if ie alerts something or if it raises an exception. Sometimes ie will try to interpret your javascript, and raise an unknown exception for no reason whatsoever: if you don't catch it in a try/catch block everything will break from that point to the end of the script.

I know, it's a trial-and-error approach, but we have to isolate everything and try to understand exactly what's causing the error. If needed, repeat the third advice along the slideshow section.

Answer 7

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 8

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.