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

Я бы не использовал 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; } 
}

источники:

• перемещение конкретного CSS Internet Explorer в @ media blocks
• как Целевой Internet Explorer 10 и 11 в CSS
• CSS хаки для Windows 10 и веб-браузера Microsoft Edge

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

решение:

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

Это

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

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

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

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

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

• Firefox не поддерживает box-sizing неподготовленный в течение многих лет
• Firefox исторически имел странное поведение контура, и это также было в течение многих лет
• Firefox отказывается вести себя разумно, когда дело доходит до позиционированных ячеек таблицы, ссылаясь на неопределенное поведение в качестве оправдания, в то время как другие браузеры, кажется, справляется просто отлично
• Safari и Chrome есть много of проблемы с некоторых в CSS селекторы, иногда с исправлениями, что действительно вернуть вас в старые добрые времена IE5, IE6 и IE7
• Chrome, похоже, имеет много проблем в отделе перекраски в целом, например, не перекрашивание макетов правильно при обновлении стилей мультимедиа; кажется, что половина ошибок Chrome может быть обработана просто и только заставляя перекрасить, снова IE5/6/7-Уровень вещи
• несколько штаммов WebKit были известны прямо врет о поддержке определенных функций, то есть они на самом деле механизмы обнаружения функции поражения, все

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я использую этот скрипт-он устарел, но эффективен в таргетинге на отдельные 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/);

Как упоминали другие люди, я бы всегда рекомендовал вместо этого обнаружение функций.

Если вы хотите нацелить 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.

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

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

CSS для IE10+ и IE9

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

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

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

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

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

Conditionizr (см. документы) добавит классы CSS браузера в ваш html-элемент, включая ie10.

Я просто хотел добавить свою версию обнаружения IE. Он основан на фрагменте, найденном вhttp://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ и exteded также для поддержки ie10 и ie11. Он обнаруживает IE 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;
}());

С 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 на будущее).

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

вот как я делаю пользовательский 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{
    .......
}

проверить 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 */
}

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

код ниже-это то, что я использую для таргетинга всего ie, добавив a .ie class to <html>

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

// 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;
}