如何仅针对某些情况(如特定于Internet Explorer的CSS或特定于Internet Explorer的Jav

我不会使用JavaScript navigator.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; } 
}

来源：

• 将特定于 Internet Explorer 的 CSS 移动到 @media 块
中
• 如何在 CSS 中定位 Internet Explorer 10 和 11
• 适用于Windows 10和Microsoft的边缘Web浏览器的CSS Hacks

我在这个网站上找到了一个解决方案，有人有有价值的评论：

解决方案是：

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

它

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

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

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

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

对我来说效果很好。但肯定不能替代有条件的评论！

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

但是请注意，JScript 中的条件编译仍然受支持，如注释以及最近的答案所示。与jQuery.browser不同，它也不会在最终版本中消失。当然，不用说，用户代理嗅探仍然像以往一样脆弱，在任何情况下都不应该使用。

如果您确实必须面向 IE10，请使用在不久的将来可能仍会支持的条件编译，或者 - 如果您可以帮助它 - 使用功能检测库(如 Modernizr(，而不是(或与浏览器检测结合使用(。除非您的用例需要noscript或在服务器端容纳IE10，否则用户代理嗅探将比可行的选择更令人头疼。

听起来很麻烦，但请记住，作为一个高度符合当今 Web 标准¹ 的现代浏览器，假设您编写了高度符合标准的可互操作代码，除非绝对必要，否则您不必为 IE10 留出特殊代码，即它应该在行为和呈现方面类似于其他浏览器。² 考虑到IE的历史，这听起来很牵强，但是你有多少次期望Firefox或Chrome以同样的方式行事，结果却令人沮丧？

• Firefox多年来一直不支持无前缀box-sizing
• Firefox 历来有奇怪的轮廓行为，多年来也是如此。
• Firefox拒绝在定位表格单元格时表现合理，以未定义的行为为借口，而其他浏览器似乎可以很好地应对
。
• Safari和Chrome在某些CSS选择器上有很多麻烦，有时修复了一些问题，这些修复真的会让你回到IE5，IE6和IE7的美好时光
。一般来说，Chrome在重绘部门似乎有很多
• 麻烦，例如，当媒体样式更新时，没有正确重排布局;似乎Chrome的一半错误可以简单地解决，只能通过强制重绘来解决，再次是IE5/6/7级别的东西
。
• 众所周知，一些WebKit的菌株在支持某些功能方面完全撒谎，这意味着它们实际上击败了功能检测机制。

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

_{比Chrome好得多，仅仅是因为IE8非常注重标准合规性(当时CSS2.1已经相当稳定，与今天的推荐只有细微的差异(，而Chrome似乎只不过是尖端伪标准的半抛光技术演示。}

²_{当我这样说时，我可能会有偏见，但它确实如此。如果你的代码可以在其他浏览器上运行，但不能在IE上运行，那么与3年前的IE版本相比，你自己的代码而不是IE10出现问题的可能性要大得多。再说一次，我可能有偏见，但说实话：你不也是吗？看看你的评论。}

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

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

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

以下是在 CSS 中定位 IE10 的方法：

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

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

此处发布的两种解决方案(略有修改(都有效：

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

或

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

您可以在 html 页面的 head 标签内包含上述任一行，然后再在 css 链接之前。然后在 css 文件中指定将"ie10"类作为父类的样式：

.ie10 .myclass1 { }

瞧！- 其他浏览器保持不变。而且你不需要jQuery。你可以在这里看到我是如何实现它的示例：http://kardash.net。

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

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

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

我使用这个脚本 - 它已经过时了，但有效地针对单独的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 >

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

喜欢：

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

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

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

正如其他人所提到的，我总是建议使用特征检测。

如果你想用Vanilla JavaScript瞄准IE 10，你可能想尝试CSS属性检测：

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

CSS 属性

除了msTouchAction，您还可以使用这些 CSS 属性之一，因为它们目前仅在 IE 10 中可用。但这种情况将来可能会改变。

• msTouchAction
• msWrapFlow
• msWrapMargin
• msWrapThrough
• msScrollLimit
• msScrollLimitXMin
• msScrollLimitYMin
• msScrollLimitXMax
• msScrollLimitYMax
• msFlexbox
• 毫秒柔性
• msFlexOrder

测试页

我已经在 CodePen 上放置了一个包含所有属性的测试页面。

适用于 IE10+ 和 IE9 的 CSS

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
}
@media screen'0 {
    /* IE8,9,10 styles*/
}

clipBoardData 是一个仅在 IE 中可用的函数，因此，如果您正在寻找面向所有 IE 版本，您可以使用

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>

您可以使用功能检测来查看浏览器是否为 IE10 或更高版本，如下所示：

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

仅当> IE9 时为真

Conditionizr(参见文档(会将浏览器CSS类添加到您的html元素中，包括ie10。

使用 JavaScript：

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

适用于所有IE。

IE08 => 'Trident/4.0'
IE09 => 'Trident/5.0'
IE10 => 'Trident/6.0'
IE11 => 'Trident/7.0'

因此，通过/Trident/x.0/g x = 4, 5, 6或7(或者可能8未来(来改变/Trident/g。

我只是想添加我的IE检测版本。它基于在 http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/中找到的代码片段，并扩展到也支持 ie10 和 ie11。它检测 IE 5 到 11。

您需要做的就是将其添加到某个地方，然后您可以随时使用简单的条件进行检查。如果全局变量isIE不是 IE，则全局变量将未定义，否则它将是版本号。因此，您可以轻松添加if (isIE && isIE < 10)或类似内容。

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());

对我来说，以下代码工作正常，所有条件注释在所有IE版本中都有效：

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->
<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

我在 Windows 8.1 上，不确定它是否与 ie11 更新有关......

以下是我如何为 Internet Explorer 做自定义 CSS：

在我的 JavaScript 文件中：

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

然后在我的CSS文件中，y定义了每个不同的样式：

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}

查看 http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

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

使用 babel 或 Typescript 来转换此代码 js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {
                thisBrow = br[keys];
                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }
            }
        }
    }
    return thisBrow;
};

这个答案让我完成了90%的路程。我在Microsoft网站上找到了其余的答案 这里.

下面的代码是我用来通过向<html>添加一个 .ie 类来定位所有 ie

使用 jQuery(在 1.9+ 中弃用了 .browser，转而支持用户代理，请参阅 http://api.jquery.com/jQuery.browser/(添加 .ie 类：

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});

如果您不介意针对 IE10 及更高版本和非 IE 浏览器，则可以使用以下条件注释：

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

源自 http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

如果确实必须这样做，可以通过在<head>中添加以下行来使条件注释起作用：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

源

CSS的现代解决方案

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}