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

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

Есть ли какой-либо css-селектор?

Ответы

Ответ 1

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

Ответ 2

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

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

сноска

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

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

Ответ 3

Вот два решения вот взломать 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, Учебник Chris

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

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

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

Ответ 4

Я пишу их и добавляю в 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, это то, что нужно.)

Ответ 5

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

@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

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

http://modernizr.com/

Ответ 7

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

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

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

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

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

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

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

Ответ 8

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

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

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