javascript 为什么我的页面可以在 IE9 的 IE7 模式下工作，而不能在 IE7 本身中工作？

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

提问by Kerrick

I recently went live with our new home page, after heavily testing it in each of IE9's browser and document modes (notjust 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!)

在 IE9 的每种浏览器和文档模式（不仅是兼容模式，还有实际的 IE7 和 IE8 模拟）中对其进行了大量测试之后，我最近才开始使用我们的新主页。该网站在每种模式下都可以运行，更不用说现代浏览器了。但是，在它启动后，我收到一封电子邮件，说该站点在 IE7 中非常糟糕。我去了一台废弃的机器，启动了 Windows XP，启动了 IE7，并加载了页面。令我震惊的是，布局确实被破坏了！（不仅仅是幻灯片！）

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

最重要的是，为什么我的页面在 IE7 中不起作用，即使它在 IE9 中以 IE7 模式工作？作为次要问题，它可能有什么“问题”？

Edit: I havefigured 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.

编辑：我已经想通了，我的问题之一可能是幻灯片，但加入.ie7 #slideshow {display:none !important}甚至不会隐藏幻灯片。我无法通过 CSS 访问它。

Edit 2: There is anotherproblem 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.

编辑 2：还有一个仅在本机 IE7 中出现的问题——该主页上的页脚和此页面是无法缩放的超小文本。它不会在 IE9 的 IE7 模式（不兼容）或任何其他浏览器中执行此操作。差异的另一个例子。

回答by Spudley

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.

我不知道 IE9 的 IE7 兼容模式，但 IE8 内置的 IE7 兼容模式以不是真正 IE7 的完美副本而闻名。它有大量自身的缺陷和怪癖，这些缺陷和怪癖不会出现在普通的 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.

这已经够糟糕了，我永远不会推荐任何人实际使用兼容模式来测试他们的网站......除了你仍然需要应付偶尔在他们的实时浏览器上实际使用兼容模式的用户。因此，MS 实际上并没有让开发人员更容易，而是通过添加另一个可能的渲染引擎来让我们更难。叹。

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.

我还没有尝试过 IE9 的兼容模式，但是如果您的经验是可以借鉴的，那么他们仍然遇到了同样的问题。很遗憾（但并不奇怪）MS 没有从他们第一次犯下的错误中吸取教训。

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.

我所知道的最好的解决方案不是使用兼容模式来测试，而是使用一个名为IE Tester的应用程序，它允许您安装和运行所有版本的 IE。它仍然不完美（正如你已经发现的那样，你会变得完美的唯一方法是在它自己真实的 XP 副本上拥有一个真正的 IE7），但它比 IE 自己的更接近真实的东西 '兼容”模式。

回答by Teddy

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.

我建议使用 HTML5BoilerPlate ( http://html5boilerplate.com/) 作为灵感和指导的来源。我处于完全相同的情况：大学的 Web 开发人员必须编写主要站点的重新设计。

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.

根据您的消息来源，我认为您已经这样做了。您使用的是最新版本吗？或许 HTML5BoilerPlate 模板已经有一些更新可以解决这个问题。

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).

我找到了一个安装了真正 IE7 的同事，果然，你的页面看起来很糟糕。然后我在真正的 IE7 中检查了我的模型，它看起来不错（我认为我现在很幸运）。

My mockup is also based on the HTML5BoilerPlate template.

我的模型也基于 HTML5BoilerPlate 模板。

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/

我认为您的幻灯片是问题的原因（或至少是症状）。我不得不使用 3 个不同的插件重新实现我的幻灯片内容。目前，我已经确定了这种内容的 jQuery 循环插件：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

查看此 MSDN 博客帖子：http: //blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx

回答by Gabriele Petrioli

The problem seems to be with the slideshow

问题似乎出在幻灯片上

Glancing through your script.jsfile i see this

浏览你的script.js文件，我看到了这个

/*
 * 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..

所以我会在那里开始我的搜索，因为它似乎忽略了 IE7 及以下..

回答by Sparky

Download the free Microsoft Virtual PCand MS's free Hard Drive imagescontaining IE 7, 8, etc... that's why they make these available.

下载免费的 Microsoft Virtual PC和 MS 的免费硬盘映像，其中包含 IE 7、8 等……这就是他们提供这些映像的原因。

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

似乎有一百万个 jQuery 幻灯片插件，大多数都与 IE 7 兼容。

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

jCarousel就是其中之一，您可以使用 CSS 将其更改为现在的样子。

This pagecontains 42 various slide-show plugins.

该页面包含 42 个不同的幻灯片插件。

---

---

EDIT:

编辑：

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

我还建议在解决其他问题之前将该页面纳入W3C 合规性。

回答by James McCormack

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

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

回答by GmonC

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).

第一：始终在实际浏览器上进行测试。如果我们在谈论 ie，请使用虚拟机来测试它。永远不要依赖“兼容模式”、“ies4linux”、“ies4mac”、“只使用wine”等。我有很多，但是在不使用虚拟机时会遇到很多麻烦（您可以在虚拟机上使用快照 - 每个快照都是一个浏览器版本。这样您就可以只有一个图像，但可以使用多个浏览器）。

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.

第二：即使您从 script.js 中删除该幻灯片部分，也会发生此问题吗？在删除该部分并重新加载页面后，您是否检查过它是否不是旧 script.js 的缓存版本？有时缓存版本是所有问题的根源。

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).

欺骗浏览器不缓存 script.js 的一个小技巧是，在从标记中调用 script.js 时，添加一个任意数字（例如，script.js?v=100，并且对于您对 js 所做的每次修改，您可以修改此数字。您可以查看 SO 的来源，它在某些部分使用了类似的方法）。

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.

...并查看 ie 是否发出警报或是否引发异常。有时 ie 会尝试解释您的 javascript，并无缘无故地引发一个未知的异常：如果您没有在 try/catch 块中捕获它，那么一切都会从那个点到脚本的结尾中断。

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.

我知道，这是一种反复试验的方法，但我们必须隔离所有内容并尝试准确了解导致错误的原因。如果需要，请重复幻灯片部分的第三条建议。

回答by elicik

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

Alrgiht，这可能是你正在寻找的答案。转到 F12 开发人员工具并单击IE9 浏览器模式和IE7 文档模式这将是 IE7 标准，但 IE9 用户代理。如果这不起作用，请尝试使用 IE7 浏览器模式和文档模式。

回答by tahdhaze09

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

我和其他人一起说可能的罪魁祸首是幻灯片。我会得到一个更 CSS 友好的幻灯片：

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

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.

并且绝对在实际浏览器中进行测试！您可以使用在线浏览器检查站点，例如 browsershots.org。他们需要很长时间才能制作您网站的镜头，但它是准确的。