为什么 Internet Explorer 11在模拟 Internet Explorer 8文档模式时不尊重有条件的评论？

我正在使用新的 Internet Explorer 11开发工具将文档模式切换到“8”，但是条件注释仍然被忽略，也就是说，它们没有被正确地解析，并且表现得像正常的注释一样。因此浏览器不会请求/载入条件注释中的任何引用文件。

为什么会这样? 是虫子吗？

如果你认为这确实是一个需要修复的 bug，请进去说，你也可以在微软的 bug 报告中复制这个问题:
当通过 F12开发人员工具 模拟文档模式时，条件注释不起作用。

更新: 这个问题已经在提到的 bug 报告中得到修复。

41762 次浏览
小开

I had the same issue - it drove me nuts all morning. I added Modernizr, and I selected all the options, including yepnope.js.

So now my test looks like this:

Modernizr.load({
test: Modernizr.canvas,
nope: ['Content/Site-ie-8.min.css', 'Content/font-awesome-ie7.min.css']
});

In this case I test for canvas (which isn't supported prior to Internet Explorer 9), so I load my conditional content. This now works when switching browser modes in Internet Explorer 11 developer tools.

小开

I just tried using this in Internet Explorer 11 on Windows 7 to make sure my used HTML5 semantic elements were being created for Internet Explorer 8 and below (via conditional comments), and the browser simply ignores them. -_-

This feature worked perfectly fine in Internet Explorer 10, and Microsoft just had to tinker with it, didn't they?

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

Apart from this, I'm actually enjoying Internet Explorer, which makes for a change.

小开

I have another solution for this.

Internet Explorer 11 with Internet Explorer 8 compatibility mode turned on contains the string 'MSIE 8.0', so:

(PHP example)

if (strpos($_SERVER['HTTP_USER_AGENT'],'MSIE 8.0') !== false) {
$head[] = sprintf('<link rel="stylesheet" href="ie8.css" />');
}
小开

I recently ran into the same problem. I also found that some conditional comments work:

  • gt and lt worked fine
  • gte and lte never worked

So one potential solution would be to change the conditional statements to use the gt and lt operators.

The other alternative, which I found more useful, was to use a service like browserstack.

小开

Some of the conditional comments are working such as 'gt' and 'lt', but for example <!--[if IE 8]> is not working. This surely is inconvenient for developers who want to try how their webpages look on different versions of Internet Explorer browsers, but it is not all bad news.

Although the conditional comments aren't working, you can still test how your webpage looks in each of the Internet Explorer versions by appending the stylesheets one at a time: let's say you got a stylesheet for Firefox, Chrome, Internet Explorer 10 and Internet Explorer 11 called 'screen.css', and another stylesheet ONLY for Internet Explorer 9 called 'screen-ie9.css' and another one ONLY for Internet Explorer 8 called 'screen-ie8.css'.

To test your webpages ONLY for Internet Explorer 9, you can do this:

<link rel="stylesheet" href="path/css/screen.css"     type="text/css" />
<link rel="stylesheet" href="path/css/screen-ie9.css" type="text/css" />

and in the F12 developer tools, Emulation section, set the 'Document Mode' to '9' and the 'User agent string' to 'Internet Explorer 9'. The Document Mode is the Standard that Internet Explorer 9 uses and the User agent string is the browser itself.

P.S: I'm assuming that the 'screen.css' is your base stylesheet which is the reason I am calling it first than "overwriting" the Internet Explorer 9 fixes later by calling 'screen-ie9.css' second.

By doing this, you can be "sure" (I have to test with VMs in order to write the word 'sure' without quotes) that you are viewing your webpage on an Internet Explorer 9 browser. When you are done testing and styling on Internet Explorer 9, and you want to test with Internet Explorer 8, you can easily do the same trick by replacing this:

<link rel="stylesheet" href="path/css/screen-ie9.css" type="text/css" />

with this:

<link rel="stylesheet" href="path/css/screen-ie8.css" type="text/css" />

So, it is just a matter of MINOR inconvenience from Microsoft's side, BUT the new F12 developers' tools are offering LOTS of amazing features, which makes this not that much of a big deal.

小开

I didn't see it mentioned here, but in this bug report it is noted that, if you change the compatibility view settings, the conditional comments work as expected. So:

  1. In IE11, click on "Tools"
  2. Compatibility View settings
  3. Type in the URL and click Add

Seems to be working fine now on my localhost. I have not tested this extensively but maybe it will help someone.

小开
最佳答案

According to Jacob Rossi [MSFT]

This should be fixed in Update 1 for IE11, released last week.

That was posted on April 22, 2014.

In running a few tests myself it does appear that this was fixed and all is running smoothly again for testing the most amazing browser ever produced...Internet Explorer!

小开

This worked for me and seems like the most elegant/easy fix (Internet Explorer 10 and Internet Explorer 11 I guess are the only browsers that support -ms-high-contract):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}

提交答案