Как написать CSS hack для IE 11? [дубликат]

этот вопрос уже есть ответ здесь:

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

есть ли css селектор?

146
css css-hack css-selectors internet-explorer-11

8 ответов

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

ссылки

207

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

IE 6

* html .foo {property:value;}

или

.foo { _property:value;}

IE 7

*+html .foo {property:value;}

или

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

IE 6 и 7

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

или

.foo { *property:value;}

или

.foo { #property:value;}

IE 6, 7 и 8

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

IE 8

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

или

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

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

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

IE 8,9 и 10

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

IE 9 только

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

IE 9 и выше

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

IE 9 и 10

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

IE 10 только

_:-ms-lang(x), .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 11 (и выше..)

_:-ms-fullscreen, :root .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':'');

добавляет (e.g) ниже до 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;
}

сноска

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

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

180

вот два шага решения вот взломать 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;
}

для получения дополнительной информации обратитесь к этим веб-сайтам,wil tutorail, Крис Уроке

и если вы хотите нацелиться на IE11 и позже, вот что я нашел:

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

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

58

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

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

и, конечно, div...

<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-хаки, вот куда идти.)

21

Вы можете использовать следующий код внутри тега 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

вы можете использовать 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

или modernizr для обнаружения объекта:

http://modernizr.com/

1

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

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

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

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

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

Примечание: это почти наверняка идентифицирует IE12 и IE13 как "IE11", поскольку эти стили, вероятно, будут продолжаться. Я добавлю дополнительные тесты по мере развертывания новых версий и, надеюсь, смогу снова полагаться на Modernizr.

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

1

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

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

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

0