Как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как CSS для Internet Explorer или JavaScript-код для Internet Explorer?

как настроить таргетинг только на Internet Explorer 10 для определенных ситуаций, таких как специфичный для Internet Explorer CSS или специфичный для Internet Explorer код JavaScript?



Я пробовал это, но это не работает:



<!--[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">.

607   24  

24 ответов:

возможно, вы можете попробовать некоторые jQuery, как это:

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

для использования этого метода необходимо включить библиотеку миграции jQuery, так как эта функция была удалена из основной библиотеки jQuery.

работал довольно хорошо для меня. Но уж точно никакой замены условным комментариям!

60  
2015-05-04 12:35:11

Я бы не использовал JavaScript navigator.userAgent или $.браузер (который использует navigator.userAgent) так как его можно подделать.

для целевого Internet Explorer 9, 10 и 11 (Примечание: также последний Chrome):

@media screen and (min-width: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; } 
}

источники:

128  
2015-09-25 23:39:44

Я нашел решение на этой сайт, где у кого-то был ценный комментарий:

решение:

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

Это

  • не нуждается в условных комментариях;
  • работает, даже если комментарий зачистки сжатия/обработки;
  • класс ie10 не добавлен в Internet Explorer 11;
  • более вероятно, чтобы работать по назначению с Internet Explorer 11 работает в Internet Explorer 10 совместимость режим;
  • не нужен автономный тег скрипта (можно просто добавить в другой код JavaScript в голове).
  • не нужно jQuery для теста
110  
2013-04-07 18:28:42

Internet Explorer 10 больше не пытается читать условные комментарии. это означает, что он будет рассматривать условные комментарии так же, как и любой другой браузер: как обычные комментарии HTML, предназначенные для полного игнорирования. Глядя на разметку, приведенную в вопросе в качестве примера, все браузеры, включая IE10, будут полностью игнорировать части комментариев, выделенные серым цветом. В стандарте HTML5 не упоминается синтаксис условного комментария, и именно поэтому они выбрали прекратите поддерживать его в IE10.

обратите внимание, однако, что условная компиляция в JScript по-прежнему поддерживается, как показано в комментариях, а также в более поздних ответах. В финальном релизе он тоже не исчезнет,в отличие от jQuery.browser. И конечно, само собой разумеется, что нюхание пользовательского агента остается таким же хрупким, как и всегда, и никогда не должно использоваться ни при каких обстоятельствах.

Если вы действительно должны нацелиться на IE10, либо использовать условный компиляция, которая все еще может увидеть поддержку в ближайшем будущем, или-если вы можете помочь ей-использовать библиотеку обнаружения функций, такую как Modernizr вместо (или в сочетании с) обнаружения браузера. Если ваш вариант использования не требует noscript или размещения IE10 на стороне сервера, обнюхивание пользовательского агента будет скорее головной болью, чем жизнеспособным вариантом.

звучит довольно громоздко, но помните, что как современный браузер, который очень соответствует сегодняшней сети стандарты1, предполагая, что вы написали совместимый код, который соответствует высоким стандартам, вы не стоит должны выделить специальный код для IE10, если это не абсолютно необходимо, т. е. он должен походить на другие браузеры с точки зрения поведения и рендеринга.2 и это звучит надуманно, учитывая историю IE, но сколько раз вы ожидали, что Firefox или Chrome будут вести себя так же, только чтобы встретиться смятение?

Если вы do есть законная причина, чтобы быть нацелены на определенные браузеры, во что бы то ни стало вынюхивать их с другими инструментами, предоставленными вам. Я просто говорю, что ты будешь намного больше трудно найти такую причину сегодня, чем это было раньше, и это действительно просто не то, на что вы можете положиться.

1не только IE10, но и IE9, и даже IE8, который обрабатывает большую часть зрелого стандарта CSS2.1 намного лучше, чем Chrome, просто потому, что IE8 был настолько сосредоточен на соблюдении стандартов (в то время как CSS2.1 уже был довольно стабильным с незначительными отличиями от сегодняшней рекомендации), в то время как Chrome, похоже, немного больше, чем a пол-полированный техно-демка современных псевдо-стандартов.

2и я могу быть предвзятым, когда говорю это, но это точно, как ад. Если ваш код работает в других браузерах, но не IE, шансы, что это проблема с ваш код а не IE10 гораздо лучше по сравнению, скажем, 3 года назад, с предыдущими версиями IE. Опять же, я могу быть предвзятым, но давайте будем честными:а ты разве нет? просто посмотрите на ваш комментарии.

62  
2017-12-14 06:04:10

хорошим местом для начала является документация поддержки стандартов IE.

вот как настроить таргетинг IE10 в JavaScript:

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

вот как настроить таргетинг IE10 в CSS:

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

в случае, если IE11 необходимо отфильтровать или сбросить с помощью CSS, см. Другой вопрос: Как написать CSS хак для IE 11?

36  
2017-05-23 14:33:24

Я написал небольшой, ванильный плагин JavaScript под названием Движок, что позволяет вам обнаруживать IE 10 (и любой другой браузер) простым способом, который нельзя подделать, в отличие от обнюхивания агента пользователя.

Он добавляет имя движка рендеринга в качестве класса в теге html и возвращает объект JavaScript, содержащий поставщика и версию (где это уместно)

проверьте мой пост в блоге:http://mattstow.com/layout-engine.html и получить код на GitHub: https://github.com/stowball/Layout-Engine

11  
2013-02-02 05:17:57

оба решения, размещенные здесь (с небольшими изменениями) работают:

<!--[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>

вы включаете любую из приведенных выше строк внутри тега head вашей html-страницы перед ссылкой css. А затем в файле css вы указываете свои стили, имеющие класс "ie10" в качестве родителя:

.ie10 .myclass1 { }

и вуаля! - другие браузеры остаются нетронутыми. И вам не нужен jQuery. Вы можете увидеть пример, как я реализовал его здесь:http://kardash.net.

10  
2012-12-30 03:06:21

Я использую этот скрипт-он устарел, но эффективен в таргетинге на отдельные таблица стилей 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 >
7  
2013-04-07 18:30:55

вы можете использовать PHP для добавления таблицы стилей для IE 10

Как:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
6  
2013-05-14 23:13:06

Если вы должны сделать это, вы можете проверить строку агента пользователя в JavaScript:

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

Как уже упоминали другие люди, я всегда рекомендую обнаружения объекта.

5  
2013-01-18 13:08:21

Если вы хотите нацелить IE 10 С помощью ванильного JavaScript, вы можете попробовать обнаружение свойств 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.

4  
2013-02-19 01:37:45

clipBoardData-это функция, которая доступна только в IE, поэтому, если вы хотите настроить таргетинг на все версии IE, вы можете использовать

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
3  
2013-07-12 13:33:43

CSS для IE10+ и IE9

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

@media screen {
    /* IE8,9,10 styles*/
}
3  
2015-10-21 04:28:14

вы можете использовать функцию обнаружения, чтобы увидеть, если браузер IE10 или больше, как так:

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

только true, если > IE9

1  
2013-04-16 21:31:55

Conditionizr (см. документы) добавить CSS классы для браузера в HTML-элемент, в том числе и в IE10.

1  
2013-07-12 14:45:21

Я просто хотел добавить свою версию обнаружения IE. Он основан на фрагменте, найденном в http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ и расширен также для поддержки ie10 и ie11. Он обнаруживает, т. е. от 5 до 11.

все, что вам нужно сделать, это добавить его где-то, а затем вы всегда можете проверить с помощью простого условия. Глобальный var 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;
}());
1  
2014-06-12 11:53:03

С 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 by /Trident/x.0/g здесь x = 4, 5, 6 или 7 (или 8 на будущее).

0  
2014-03-20 21:02:43

для меня следующий код работает нормально, все условные комментарии работают во всех версиях 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...

0  
2014-04-28 01:56:03

вот как я делаю пользовательский CSS для Internet Explorer:

в моем файле 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{
    .......
}
0  
2014-05-22 05:21:53

проверить 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 */
}
0  
2014-05-22 06:06:23

этот ответ дал мне 90% пути туда. Я нашел остальную часть моего ответа на сайт Microsoft здесь.

ниже приведен код, который я использую для таргетинга всех ie, добавив класс. ie в <html>

использовать jQuery (который устарел .браузер в пользу пользовательских агентов в 1.9+, см. http://api.jquery.com/jQuery.browser/) для добавления класса. ie:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});
-2  
2013-08-29 15:52:44

Если вы не против таргетинга на IE10 и выше и не IE браузеров, вы можете использовать этот условный комментарий:

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

производное от http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

-2  
2014-06-25 20:53:54

Если вам действительно нужно, вы можете сделать условные комментарии работать, добавив следующую строку в <head>:

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

источник

-2  
2014-07-28 01:20:35

современное решение для css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}
-4  
2014-05-23 13:36:31

Comments

    Ничего не найдено.
Click here to cancel reply.