在某些情况下,例如特定于Internet Explorer的CSS或特定于Internet Explorer的JavaScript代码,如何仅将Internet Explorer 10定位?

2020/10/31 15:03 · javascript ·  · 0评论

在某些情况下,例如特定于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">

也许您可以尝试这样的jQuery:

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

要使用此方法,您必须包括jQuery Migrate库,因为此功能已从主jQuery库中删除。

对我来说很好。但是肯定不能代替条件注释!

我不会使用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 */
}

定位边缘浏览器:

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

资料来源:

我在这个网站上找到了一个解决方案,有人对此发表了宝贵的评论

解决方案是:

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

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

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

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

如果确实必须以IE10为目标,请使用有条件的编译(可能会在不久的将来获得支持),或者(如果可以帮助您)使用功能检测库(例如Modernizr)来代替(或与浏览器一起检测)。除非您的用例需要noscript或在服务器端安装IE10,否则用户代理嗅探将比可行的选择更令人头疼。

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

如果您确实有理由要针对特定​​的浏览器,则一定要使用提供给您的其他工具来将它们嗅出。我只是说,今天要找到这样一个理由比现在要困难得多,这实际上不是您可以依靠的东西。


1 不仅IE10,而且IE9甚至是处理大多数成熟CSS2.1标准的IE8都比Chrome更好,这仅仅是因为IE8如此专注于标准合规性(当时CSS2.1已经相当稳定,只有很小的差异)根据今天的建议),而Chrome似乎只是半精打磨的尖端伪标准技术演示而已。

2 我这样说时可能会有偏见,但可以肯定的是。如果您的代码可以在其他浏览器上运行,但不能在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>

在CSS链接之前,请将以上任一行包含在html页的head标记内。然后在css文件中,指定以“ ie10”类作为父类的样式:

.ie10 .myclass1 { }

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

我编写了一个名为Layout Engine的小型香草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
  • msFlex
  • msFlexOrder

测试页

我将CodePen上所有属性测试页放在一起

clipBoardData是仅在IE中可用的函数,因此,如果您要定位所有IE版本,则可以使用

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

IE10 +和IE9的CSS

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

@media screen\0 {
    /* IE8,9,10 styles*/
}

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

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

仅当> IE9时为真

Conditionizr (请参阅文档)将向您的html元素(包括ie10 添加浏览器CSS类。

使用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/g/Trident/x.0/g在哪里x = 4, 5, 67(或8将来)更改

我只想添加我的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文件中,定义每个不同的样式:

.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或打字稿转换此代码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网站上找到了答案的其余部分

下面的代码是我用来定位所有目标的代码,即通过添加.ie类 <html>

使用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-n

如果确实需要,可以通过将以下行添加到来使条件注释生效<head>

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

资源

CSS的现代解决方案

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
本文地址:http://javascript.askforanswer.com/zaimouxieqingkuangxialirutedingyuinternet-explorerdecsshuotedingyuinternet-explorerdejavascrip.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!