如何在IE11中恢复“浏览器模式”?

133

更新:旧问题仅适用于IE11预览版;浏览器模式已在IE11最终版中恢复。但有一个问题:它几乎没有用处,因为它不会模拟条件注释。例如,如果您使用它们在传统IE中启用HTML5支持,您将无法在IE11中调试您的网站。

        <!--[if lte IE 8]>
            <script src="html5shiv.js"></script>
        <![endif]-->

阅读另一个StackOverflow问题和IE错误追踪问题。微软从未回应过此问题,因此看起来他们故意引入了这个错误,以便将人们引导到购买BrowserStack订阅。条件注释仿真在预览版中运行良好。

原始问题: 当在Windows 7上安装IE11预览版时,它带有老式的F12工具,可用于更改浏览器模式。 enter image description here

然而,如果您转到“工具”菜单并选择“F12”开发人员工具,则会替换为新的开发人员工具,并且“浏览器模式”将不再可用。 enter image description here

唯一的方法是卸载IE11并重新安装它。

是否有更简单的方法在IE11中切换浏览器模式?


1
这似乎是一个适合在MS特定论坛上提问的好问题(或者可能是一个错误报告!) - Evan Davis
4
@Mathletics - 这并不是一个错误,而是非常有意的。 - Spudley
2
你是怎么搞到第一个屏幕的?为什么我按F12出现了第二个屏幕。 - Sliq
1
@Panique - 当我第一次安装IE11时,它就在那里了。可能是因为我总是在IE10中使用F12工具,所以它会自动迁移这个设置。然后我可以使用F12键来显示和隐藏它。但千万不要去工具菜单。 如果你想把它带回来,首先卸载IE11更新。对我有用。 - Evgeny
F12的文档模式仿真功能已从IE11预发布版本中删除。经过许多客户的反馈,最近泄露出该功能将在IE11的未来更新中恢复。 - EricLaw
1
来自Sitepoint.com的文章:IE11:浏览器模式回归(在Windows 8.1中) - Sliq
8个回答

147

[更新]

原始问题和下面的回答仅适用于IE11的预览版本

IE11 最终发布版本实际上提供了从开发工具的仿真选项卡中切换浏览器模式的功能:

屏幕截图显示仿真选项卡中的浏览器模式选择

话虽如此,我在这里(以及其他地方)给出的避免使用兼容性模式进行测试的建议仍然有效:如果您想测试您的网站与旧版IE的兼容性,则应始终在实际的IE版本副本中进行测试。

但是,这意味着不再需要执行@EugeneXa答案中描述的注册表修改以恢复旧的开发工具,因为新的开发工具确实具有他所缺少的功能。


[原始回答]

IE开发人员故意废弃了切换浏览器模式的能力。

人们在开发工具中切换模式的原因并不多,但其中一个主要原因是因为他们希望在旧的IE版本中测试自己的网站。不幸的是,IE提供的各种兼容性模式从未真正与旧版本的IE完全兼容,使用兼容性模式进行测试根本不足以替代在真正的IE8、IE9等副本中进行测试。

IE开发人员已经意识到这一点,并且故意使开发人员更难犯此错误。

最佳做法是使用每个IE版本的真实副本来测试您的网站。

各种兼容性模式仍然在IE11中可用,但只有当一个站点明确地声明它要在兼容模式下运行时才能访问。您可以通过在页面上包含X-UA-Compatible头来实现此目的。

文档模式下拉框仍然可用,但只会提供"Edge"选项(即当前IE版本可用的最佳模式,在IE11中为IE11模式)或页面所运行的模式。

因此,如果您进入一个以兼容模式加载的页面,您将有选择在页面被加载的特定兼容模式和IE11“Edge”模式之间切换的选项。

如果您进入一个以IE11模式加载的页面,则只会提供'edge'模式,没有其他选项。

这意味着它仍然允许您测试兼容模式页面对被更新为在Edge模式下工作的反应,这是文档模式下拉框唯一真正合理的用例。

IE11文档模式下拉框旁边有一个图标,点击后会跳转到modern.ie网站。这是为了鼓励您下载微软提供的VMs,以便使用每个IE版本的真实副本测试我们的站点。这将为您提供更加准确的测试体验,并且强烈建议作为比在开发工具中切换模式进行测试更好的做法。
希望这能对您有所帮助。

8
使用微软提供的免费虚拟机进行测试显然更好,但也更加耗时。我需要启动虚拟机,需要在几个不同的虚拟机之间切换,并且每次激活计时器到期时都需要重新安装它们,因为它们没有提供任何激活密钥。尽管如此,我想我们应该感谢他们实际上花了时间设置这些虚拟机。你可以使用旧的F12兼容模式捕捉到很多问题,并且然后使用虚拟机进行验证。但我跑题了。 - ivarni
7
我理解他们认为弃用兼容性模式下拉菜单是个好主意,但我认为这也是对那些花时间确保他们的网站在IE中正常工作的开发人员的侮辱。正如其他人所提到的那样,使用兼容性检查器检查明显的错误效果很好。此外,你还可以利用相对不错的一套开发工具(与IE7甚至8中的垃圾工具相比)。我会养成检查虚拟机的习惯,任何好的开发人员都应该这样做。但是这种改变只会导致更少的开发人员关心在旧版IE中实现功能。 - LocalPCGuy
4
顺便说一下,我不应该加载完整的操作系统来测试一个愚蠢的浏览器。如果微软真的希望开发者确保他们的东西在旧版本的IE中正常工作,他们应该提供更好的免费选项。否则,看起来他们鼓励开发者忽略旧版本,只关注解决新版本中的错误。 - LocalPCGuy
9
不,BrowserStack 不是免费的,使用虚拟机很麻烦(不要告诉我相反的情况,我已经设置好了所有虚拟机,每三个月就必须重置它们等等...它们很麻烦)。我了解 Modern.ie 和 Microsoft 的服务。Microsoft 正在取消一个简单、免费、适用于大多数开发者需要测试的方法,并用笨重的虚拟机或收费服务来代替。这让我不满意。我是 Microsoft 支持者之一,在一个 .NET 应用程序开发公司工作。我认为这很愚蠢。 - LocalPCGuy
4
我理解为:“我们搞砸了,给你错误的工具来应对我们的错误,现在我们要指引你使用能给我们赚钱的工具。” - Zenexer
显示剩余17条评论

19

虽然使用虚拟机是测试旧版IE的最佳方法,但是通过编辑注册表可以恢复老式的F12工具。当新的F12工具被激活时,IE11会覆盖此值。

感谢神奇的Dimitri Nickolaѕ提供这个技巧。 enter image description here

这对我有用(保存为.reg文件并运行):

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Toolbar\WebBrowser]
"ITBar7Layout"=hex:13,00,00,00,00,00,00,00,00,00,00,00,30,00,00,00,10,00,00,00,\
  15,00,00,00,01,00,00,00,00,07,00,00,5e,01,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,00,\
  00,00,00,69,e3,6f,1a,8c,f2,d9,4a,a3,e6,2b,cb,50,80,7c,f1

8
我不知道是要对某人能够找到一种方式来黑掉IE11以获取旧的开发者工具感到印象深刻,还是感到沮丧,因为他们愿意为了切换浏览器模式而牺牲所有令人惊叹的新功能。 :-( - Spudley
7
这与微软生产不符合W3C标准的浏览器的历史有很大关系。IE10或11没有任何问题-它们是很好的现代浏览器。问题在于9、8甚至直到最近的7和6版本。由于在Windows 8中无法将它们与现代IE一起安装,因此需要一个好的仿真工具。 - Evgeny
1
这里的技巧很有趣,但显然不受微软支持,可能会产生意外的副作用。 - EricLaw
5
我认为这一点都不无意义。在测试IE时,我的工作流程是先使用F12兼容模式,找出任何问题,然后再费力地启动虚拟机。这比在(不同的)虚拟机中进行所有IE测试要高效得多。 - ivarni
2
为了让这个注册表修改生效,我还必须更新ITBar7Layout64的值。虽然它最终起作用了,但是关闭和重新打开F12工具会导致IE崩溃 :) 还好我备份了注册表键。 - Ian Yates
显示剩余5条评论

17
您可以使用模拟功能 (Ctrl + 8) 文档模式 (10,9,8,7,5) 和浏览器配置文件 (桌面、Windows Phone) 来获得此内容。 输入图像描述

谢谢你分享在哪里找到的信息,我之前卡住了! :) - Michelle

5

如果在MSDN上遇到问题,最简单的方法是按照以下步骤进行设置,这将帮助您节省时间。

http://support.microsoft.com/kb/2900662/en-us?sd=rss

  1. 打开开发者工具窗格。 按F12即可。
  2. 打开仿真屏幕。 按Ctrl + 8即可。
  3. 在“模式”下的“文档模式”列表中,单击9。
  4. 在“模式”下的“用户代理字符串”列表中,单击Internet Explorer 9。

3
友好提醒,请尽量包含解决方案的详细信息,而不仅仅提供链接。如果链接失效,那么答案对未来的人将毫无用处。链接很有帮助,但请将其作为所包含的详细答案的链接参考。请注意让翻译内容通俗易懂,但不要改变原意。 - Anil

4
您可以通过为您正在调试的IE版本设置X-UA-Compatible元标头来解决此问题。这将更改浏览器模式为您在标头中指定的版本。
例如:
<meta http-equiv="X-UA-Compatible" content="IE=9" />

为了使开发者工具中的浏览器模式更新,您需要关闭[开发者工具]并重新打开。这将切换到该特定版本。
从小版本切换到大版本只需刷新即可正常工作,但如果您想从大版本切换回小版本,比如从9到7,您需要打开一个新标签并再次加载页面。
以下是截图:

2

在IE11中,我们可以将用户代理更改为IE10、IE9甚至Windows手机。这真的很不错。


3
那只是更改用户代理字符串,不会改变浏览器行为。这对于兼容性测试完全没有用处。 - Zenexer

2

如何在IE11中恢复“浏览器模式”?

简单的方法是进入仿真模式(ctrl + 8)

并更改用户代理字符串。(见附图)

enter image description here


那只是改变用户代理字符串;它不会改变浏览器的行为。它对于兼容性测试完全没有用处。另外,你的例子正在使用X-UA-Compatible。 - Zenexer

2
微软有一个专门用于这个目的的工具:Microsoft Expression Web。有一个免费版本,其中包括一些类似于FrontPage/Dreamweaver的垃圾功能,没有人想要。重要的是它有一个很棒的浏览器测试功能。我正在运行Windows 8.1 Pro(最终版,而不是预览版)和Internet Explorer 11。我获取了以下本地浏览器:
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 11 /!\不支持的版本(不能使用;没关系,我有浏览器)
然后我获得了一个远程浏览器(Beta)选项。我应该使用有效的电子邮件注册,但与服务器通信时出现错误。哦,好吧。
Firefox曾经受到支持,但我现在不见了。可能被隐藏了。
我可以在浏览器版本之间进行并排比较。我还可以与图像或显然是PSD文件进行比较(不知道效果如何)。InDesign会很好,但那可能要求太多了。
由于Visual Studio Ultimate也安装在同一台计算机上,我还部分安装了Expression的完整版本,因此我希望有人在评论中确认我的免费安装没有自动升级。
更新:看起来在线服务已经停止,但本地浏览器仍受支持。您也可以只下载SuperPreview,而不包括编辑器垃圾。如果您想要完整的IDE,则最新版本为Microsoft Expression Web 4(免费版本)。这是官方支持的浏览器列表。IE6在Windows 8.1上似乎会出错,但IE7可用。
更新2014-12-09:微软已经放弃了这个工具。不要期望它能够正常工作。

上一次我查看Expression Web / Super Preview时,发现它只提供各种浏览器页面的静态快照。虽然这正是像素完美的网页设计师所需要的,但这并不是开发人员想要的——我们想要与页面进行交互、调试JS和CSS以及操作DOM,这就是IE开发人员工具的用武之地。 - saille
@saille 我现在手头没有它,但我很确定它是交互式的。 - Zenexer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接