it-swarm.com.ru

Как написать CSS-хак для IE 11?

Как я могу взломать или написать CSS только для IE 11? У меня есть веб-сайт, который выглядит плохо в IE 11. Я просто ищу здесь и там, но пока не нашел решения.

Есть ли селектор CSS?

171
user2135651

Используйте комбинацию определенных CSS-правил Microsoft для фильтрации IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Фильтры, такие как эта, работают из-за следующего:

Когда пользовательский агент не может проанализировать селектор (т. Е. Он не является допустимым CSS 2.1), он также должен игнорировать селектор и следующий блок объявления (если есть).

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

ссылки

249
Paul Sweatte

В свете развивающейся темы я обновил ниже:

IE 11 (и выше ..)

_:-ms-fullscreen, :root .foo { property:value; }

IE 10 и выше

_:-ms-lang(x), .foo { property:value; }

или же

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .foo{property:value;}
}

Только IE 10

_:-ms-lang(x), .foo { property:value\9; }

IE 9 и выше

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  //.foo CSS
  .foo{property:value;}
}

IE 9 и 10

@media screen and (min-width:0\0) {
    .foo /* backslash-9 removes.foo & old Safari 4 */
}

Только IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 //.foo CSS
 .foo{property:value;}
}

IE 8,9 и 10

@media screen\0 {
    .foo {property:value;}
}

IE 8 только в стандартном режиме

.foo { property /*\**/: value\9 }

IE 8

html>/**/body .foo {property:value;}

или же

@media \0screen {
    .foo {property:value;}
}

IE 7

*+html .foo {property:value;}

или же

*:first-child+html .foo {property:value;}

IE 6, 7 и 8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6 и 7

@media screen\9 {
    .foo {property:value;}
}

или же

.foo { *property:value;}

или же

.foo { #property:value;}

IE 6, 7 и 8

@media \0screen\,screen\9 {
    .foo {property:value;}
}

IE 6

* html .foo {property:value;}

или же

.foo { _property:value;}

Javascript альтернативы

Modernizr

Modernizr быстро запускает загрузку страницы для обнаружения функций; затем он создает объект JavaScript с результатами и добавляет классы в элемент html

выбор агента пользователя

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Добавляет (например, ниже) элемент html:

data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Разрешить очень целенаправленные селекторы CSS, например:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Сноска

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


Атрибуция/Основное Чтение

207
SW4

Вот два шага, решение - взломать IE10 и 11

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

поскольку IE10 и IE11 поддерживают -ms-high-cotrast, вы можете воспользоваться этим, чтобы настроить таргетинг на эти два браузера

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

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

и этот тег HTML

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

и теперь вы можете написать свой код CSS, как это

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

для получения дополнительной информации, пожалуйста, обратитесь к этим сайтам, будет Tutorail , Chris Tutorial


И если вы хотите использовать IE11 и более поздние версии, вот что я нашел:

_:-ms-fullscreen, :root .selector {}

Вот отличный ресурс для получения дополнительной информации: browserhacks.com

62
Hbirjand

Я пишу их и добавляю на BrowserHacks.com с осени 2013 года - этот, который я написал, очень прост и поддерживается только IE 11.

<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>

и конечно же див ...

<div class="msie11">
    This is an Internet Explorer 11 CSS Hack
<div>

Таким образом, текст отображается в синем с Internet Explorer 11. Удачи с этим.

-

Другие IE и ​​другие браузерные CSS-хаки на моем живом тестовом сайте здесь:

ОБНОВЛЕНО: http://browserstrangeness.bitbucket.io/css_hacks.html

ЗЕРКАЛО: http://browserstrangeness.github.io/css_hacks.html

(Если вы также ищете MS Edge CSS Hacks, это то, что нужно.)

23
Jeff Clayton

Вы можете использовать следующий код внутри тега style:

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

Ниже приведен пример, который работал для меня:

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

Обратите внимание, что поскольку (#nav li) и (#nav a) находятся за пределами экрана @media ..., они являются общими стилями.

6
hoooman

Вы можете использовать js и добавить класс в html, чтобы поддерживать стандарт условные комментарии :

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

Или используйте lib как bowser:

https://github.com/ded/bowser

Или модернизр для обнаружения функций:

http://modernizr.com/

1
Liko

Так что в конце концов я нашел свое решение этой проблемы.

После поиска через документация Microsoft Мне удалось найти новый стиль только для IE11 msTextCombineHorizontal

В моем тесте я проверяю стили IE10 и, если они имеют положительное совпадение, то я проверяю только стиль IE11. Если я нахожу это, то это IE11 +, если нет, то это IE10.

Пример кода: Определение IE10 и IE11 с помощью тестирования возможностей CSS (JSFiddle)

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

ПРИМЕЧАНИЕ. Это почти наверняка идентифицирует IE12 и IE13 как "IE11", так как эти стили, вероятно, будут перенесены. Я добавлю дополнительные тесты по мере выпуска новых версий и, надеюсь, снова смогу положиться на Modernizr.

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

1
HDT

Я нашел это полезным

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

Добавьте это под своим документом <head>

0
ikke aviy