对于某些情况,例如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码,我如何仅针对 Internet Explorer 10?

IT技术 javascript html css internet-explorer-10 conditional-comments
2021-02-02 00:47:07

对于某些情况,例如 Internet Explorer 特定的 CSS 或 Internet Explorer 特定的 JavaScript 代码,我如何仅针对 Internet Explorer 10?

我试过这个,但它不起作用:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer的10忽略的条件注释,并使用<html lang="en" class="no-js">替代<html class="no-js ie10" lang="en">

6个回答

我不会使用 JavaScriptnavigator.userAgent$.browser(使用navigator.userAgent),因为它可以被欺骗。

以 Internet Explorer 9、10 和 11 为目标(注意:也是最新的 Chrome):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

以 Internet Explorer 10 为目标:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

以 Edge 浏览器为目标:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

资料来源:

真是太好了 但是在 IE 中针对浏览器模式测试各种文档模式时,我们应该如何关注?在什么情况下,我们可以期望在线用户使用与当前浏览器模式不同的文档模式?
2021-03-13 00:47:07
你是我的英雄!请注意,这也修复了 IE11 中的一些问题
2021-03-22 00:47:07
这也会影响 IE11 - 因此,如果您正在寻找仅针对 IE9/10 的解决方案,则此方法将不起作用:-(
2021-03-31 00:47:07
“他们都通过navigator.userAgent检测浏览器是什么意思条件编译是 JScript 运行时的内置功能,无法通过用户代理字符串进行欺骗。
2021-04-06 00:47:07
人们通常不会更改文档模式。他们可以,但我没有遇到任何需要用户更改文档模式的站点。如果您使用正确的 DOCTYPE,这根本不是问题。
2021-04-09 00:47:07

我在站点上找到了一个解决方案,其中有人提出了宝贵意见

解决办法是:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

  • 不需要条件注释;
  • 即使注释剥离压缩/处理也能工作;
  • Internet Explorer 11 中没有添加 ie10 类;
  • 在 Internet Explorer 10 兼容模式下运行的 Internet Explorer 11 更有可能按预期工作;
  • 不需要独立的脚本标签(可以添加到头部的其他 JavaScript 代码中)。
  • 不需要 jQuery 来测试
这应该是最佳答案,对于 IE10 用户来说,JS 要求应该没有实际意义——如果 JS 被禁用,它可能只是 NoScript 插件。我认为我们需要更多关于 NoScript 愚蠢的公共教育(而不是像 AdBlock 或 Ghostery 这样的健全插件)。
2021-03-14 00:47:07
我能看到的唯一缺点是它需要 js,而条件没有
2021-03-15 00:47:07
我建议使用作者提供的替代代码:if (/*@cc_on!@*/false && document.documentMode === 10) {}它可以绕过 linting 程序中的 eval 警告。
2021-03-16 00:47:07
@dave1010 编写一个可以执行您所描述的工作的解析器非常困难,而且极不可能。任何故意创建和安装此类扩展的人很可能打算“表现得像”IE(也许是为了在非 Windows 环境中进行自动化测试?)。浏览器永远无法保证 100% 信任,但您可以足够接近。条件注释是一种非常可靠的检测JScript 引擎的方法,它恰好被IE 使用。
2021-03-27 00:47:07
@dave1010 用户代理很容易被欺骗。条件注释仅受 JScript 引擎支持,该引擎仅在 IE4+(包括 10)中可用。
2021-04-01 00:47:07

也许你可以尝试一些像这样的 jQuery:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

要使用此方法,您必须包含 jQuery Migrate 库,因为此函数已从主 jQuery 库中删除。

对我来说效果很好。但肯定没有条件评论的替代品!

我不确定你们,但我需要使用== '10.0'它才能工作
2021-03-22 00:47:07
@Marc-AndréLafortune 提出了一个很好的观点。根据经验,您应该始终使用 === 运算符而不是 ==。在编写 javascript 时,您需要注意这一点。stackoverflow.com/questions/359494/...
2021-03-29 00:47:07
我建议: if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }注意verion < 10以检测旧版本的 IE。IE10 及以上版本适用于我所有的 CSS3、HTML5、jquery 等。
2021-04-03 00:47:07
警告:jQuery.browser在没有插件的当前版本的 jQuery (1.9) 中不再可用。blog.jquery.com/2013/01/15/...
2021-04-07 00:47:07
@dan 因为条件注释适用于所有 IE 浏览器少于 10 使用它们而不是为所有浏览器混乱您的 JS。只需说 <!--[if lte IE 9]>,您就可以定位所有小于 10 的 IE 版本。不需要 JS。
2021-04-07 00:47:07

Internet Explorer 10 不再尝试阅读条件注释。这意味着它将像任何其他浏览器一样对待条件注释:作为常规 HTML 注释,意味着完全被忽略。以问题中给出的标记为例,包括 IE10 在内的所有浏览器都将完全忽略以灰色突出显示的注释部分。HTML5 标准没有提及条件注释语法,这正是他们选择在 IE10 中停止支持它的原因。

但是请注意,仍然支持 JScript中的条件编译,如评论以及最近的答案所示。这不是最终版本要离开要么,不像jQuery.browser当然,不用说,用户代理嗅探仍然像以往一样脆弱,在任何情况下都不应该使用。

如果您确实必须以 IE10 为目标,要么使用条件编译,在不久的将来可能仍会得到支持,或者——如果你能提供帮助——使用功能检测库,如Modernizr,而不是(或结合)浏览器检测。除非您的用例需要 noscript 或在服务器端适应 IE10,否则用户代理嗅探将比可行选项更令人头疼。

听起来很麻烦,但请记住,作为一个现代的浏览器这是高度符合的到今天的Web标准1,假设你已经写了互操作的代码是高度符合标准,你不应该要为IE10预留特殊的代码,除非绝对必要,即它应该在行为和渲染方面类似于其他浏览器。2考虑到 IE 的历史,这听起来有些牵强,但是您有多少次期望 Firefox 或 Chrome 以相同的方式运行却让您感到沮丧?

如果您确实有正当理由针对某些浏览器,请务必使用提供给您的其他工具来嗅探它们。我只是说,你今天会比过去更难找到这样的理由,而且这真的不是你可以依赖的东西。


1 不仅是 IE10,还有 IE9,甚至 IE8 处理大多数成熟的 CSS2.1 标准都比 Chrome 好得多,这仅仅是因为 IE8 非常注重标准合规性(当时 CSS2.1 已经非常稳定,只有细微的差异)来自今天的推荐)而 Chrome 似乎只是尖端伪标准的半成品技术演示。

2 我这么说可能有偏见,但确实如此。如果您的代码可以在其他浏览器中运行,但不能在 IE 中运行,那么3 年前使用以前版本的 IE 相比这是您自己的代码而不是 IE10的问题的可能性要大得多。再说一次,我可能有偏见,但老实说:你不是吗?只要看看你的评论。

@trusktr 如果你编码得好,那么它在所有最新的浏览器中都会看起来不错。
2021-03-19 00:47:07
@Dan Mantyla:在那种情况下, <!--[if !IE]><!-->stuff you don't want IE9 and below to see<!--<![endif]-->
2021-03-19 00:47:07
Chhhh,是的,IE10 仍然远远落后于 webkit 和 gecko。我有一些 CSS 在 webkit 中看起来很好,在 IE10 中看起来很糟糕。如果我找不到一种方法来选择性地应用这些样式,那么我将不得不放弃这些样式。:(
2021-03-31 00:47:07
值得指出的是,IE10 中删除了条件注释,因为它现在具有 HTML5 解析器。根据 HTML5 解析算法,条件注释无效。请参阅blogs.msdn.com/b/ie/archive/2011/07/06/... 的旧功能部分
2021-04-01 00:47:07
@KlevisMiho 不正确,Chrome 和 Firefox 支持 IE 没有的功能,即使编码良好。如果您的意思是“仅使用通用功能”,那么这与“代码良好”并不完全相同。
2021-04-03 00:47:07

一个很好的起点是IE 标准支持文档

以下是在 JavaScript 中定位 IE10 的方法:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

以下是如何在 CSS 中定位 IE10:

@media all and (-ms-high-contrast: none) {
...
}

如果 IE11 需要通过 CSS 过滤或重置,请参阅另一个问题: 如何为 IE 11 编写 CSS hack?

您的 CSS 解决方案也会影响 IE11:\
2021-03-22 00:47:07