如何针对某些情况(如Internet Explorer特定的CSS或特定于Internet Explorer的JavaScript代码)仅定位Internet Explorer 10?

tru*_*ktr 159 html javascript css conditional-comments internet-explorer-10

如何针对某些情况(如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]-->
Run Code Online (Sandbox Code Playgroud)

Internet Explorer 10忽略条件注释并使用<html lang="en" class="no-js">而不是<html class="no-js ie10" lang="en">.

Ron*_*oni 131

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

要定位Internet Explorer 9,10和11(注意:也是最新的Chrome):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}
Run Code Online (Sandbox Code Playgroud)

要定位Internet Explorer 10:

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

要定位Edge Browser:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}
Run Code Online (Sandbox Code Playgroud)

资料来源:

  • 这也影响IE11 - 所以如果你正在寻找只针对IE9/10的解决方案,这个将无法正常工作:-( (8认同)
  • 你是我的英雄!只是一个注释,这也解决了IE11中搞砸的一些东西 (3认同)

Wil*_*Wit 111

我发现了一个解决这个网站,有人有一个宝贵的评论:

解决方案是:

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

  • 不需要有条件的评论;
  • 即使评论剥离压缩/处理也能正常工作;
  • Internet Explorer 11中没有添加ie10类;
  • 在Internet Explorer 10兼容模式下运行的Internet Explorer 11更有可能按预期工作;
  • 不需要独立的脚本标记(可以添加到头部的其他JavaScript代码中).
  • 不需要jQuery来测试

  • 我建议使用作者提供的替代代码:`if(/*@ cc_on!@*/false && document.documentMode === 10){}`它在linting程序中绕过eval警告. (8认同)
  • 这应该是最重要的答案,对于IE10用户来说,JS要求应该没有实际意义 - 如果JS被禁用,它可能只是NoScript插件.我认为我们需要更多关于NoScript纯粹愚蠢的公众教育(而不是像AdBlock或Ghostery这样的理智插件). (4认同)
  • @ dave1010用户代理很容易被欺骗.条件注释仅受JScript引擎支持,该引擎仅在IE4 +(包括10)中可用. (3认同)
  • 唯一的缺点我可以看到它需要js,条件没有 (3认同)
  • @ dave1010编写一个能够完成你所描述的工作解析器很困难且极不可能.故意创建和安装此类扩展的任何人都很可能打算"像IE一样行事"(可能是为了在非Windows环境中进行自动化测试?).浏览器永远无法保证100%的信任,但您可以充分接近.条件注释是检测JScript引擎的一种高度可靠的方法,恰好由IE使用. (2认同)

Max*_*hrt 63

也许你可以试试这样的jQuery:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}
Run Code Online (Sandbox Code Playgroud)

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

对我来说工作得很好.但肯定没有条件评论的替代品!

  • 警告:在没有插件的情况下,当前版本的jQuery(1.9)中不再提供`jQuery.browser`.http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/ (111认同)
  • 我不确定你们,但我需要使用"== '10 .0"来使它工作 (3认同)
  • 我建议:`if(jQuery.browser.msie && jQuery.browser.version <10){//做你将要做的事情}`注意*verion <10*来检测IE的旧版本.IE10及以上版本适用于我的所有CSS3,HTML5,jquery等. (2认同)

Bol*_*ock 62

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的问题要好得多.同样,我可能有偏见,但说实话:你也不是吗?看看你的评论.

  • Chhh,是的,IE10仍远远落后于webkit和gecko.我有一些CSS在webkit中看起来很好,在IE10中很可怕.如果我找不到有选择地应用样式的方法,那么我将不得不放弃这样的样式.:( (20认同)
  • @KlevisMiho不正确,Chrome和Firefox支持IE没有的功能,即使编码良好.如果您的意思是"仅使用常用功能",那么这与"代码良好"并不完全相同. (9认同)
  • @Dan Mantyla:在这种情况下,`<! - [if!IE]> <! - >你不希望IE9及以下的东西看到<! - <![endif] - >` (5认同)
  • @trusktr如果你编写得很好,那么在所有最新的浏览器中看起来都会很好. (3认同)
  • 值得指出的是,IE10中删除了条件注释,因为它现在有一个HTML5解析器.根据HTML5解析算法,条件注释无效.请参阅http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx的遗留功能部分 (2认同)

Pau*_*tte 36

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

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

if ("onpropertychange" in document && !!window.matchMedia) {
...
}
Run Code Online (Sandbox Code Playgroud)

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

@media all and (-ms-high-contrast: none) {
...
}
Run Code Online (Sandbox Code Playgroud)

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

  • 您的CSS解决方案也会影响IE11: (5认同)

Eug*_*ash 11

这里发布的两个解决方案(略有修改)都有效:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

要么

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>
Run Code Online (Sandbox Code Playgroud)

在css链接之前,您可以在html页面的head标记内包含上述任一行.然后在css文件中指定具有"ie10"类作为父级的样式:

.ie10 .myclass1 { }
Run Code Online (Sandbox Code Playgroud)

瞧! - 其他浏览器保持不变.而且你不需要jQuery.您可以在此处查看我如何实现它的示例:http://kardash.net.


Mat*_*tow 11

我编写了一个名为Layout Engine的小型,普通的JavaScript插件,它允许您以一种无法伪造的简单方式检测IE 10(以及其他所有浏览器),这与用户代理嗅探不同.

它将呈现引擎名称添加为html标记上的类,并返回包含供应商和版本的JavaScript对象(如果适用)

查看我的博客文章:http://mattstow.com/layout-engine.html并获取GitHub上的代码:https://github.com/stowball/Layout-Engine


Deb*_*rah 7

我使用这个脚本 - 它是过时的,但是有效地定位单独的 Internet Explorer 10样式表或JavaScript文件,仅当浏览器是Internet Explorer 10 时才包含,与条件注释相同.不需要jQuery或其他插件.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
Run Code Online (Sandbox Code Playgroud)

  • 凉.你能为这些@statements添加一些信息吗? (2认同)

Len*_*ckx 6

您可以使用PHP为IE 10添加样式表

喜欢:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
Run Code Online (Sandbox Code Playgroud)

  • 由于条带不区分大小写,因此将字符串置于高位是没有意义的;) (2认同)
  • 我总是试着这个,但是请记住,当前端有cdn/cache/proxy时会中断. (2认同)

dav*_*010 5

如果必须这样做,可以在JavaScript中检查用户代理字符串:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);
Run Code Online (Sandbox Code Playgroud)

正如其他人提到的那样,我总是建议使用特征检测.

  • `String.match()`将为匹配返回一个数组,否则返回null.`!(String.match())`使匹配返回false,不匹配返回true.`!(!(String.match()))`使匹配返回true,不匹配返回false.`!(!(something))`或者只是`!! something`因此将任何东西转换为布尔值true/false.http://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript (4认同)

归档时间:

查看次数:

159659 次

最近记录:

6 年,8 月 前