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

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




  • Обнаружение IE11 с помощью функции CSS/обнаружения функций

    17 ответов



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



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

869   8  

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  
2017-08-24 00:29:31

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

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 }

т. е. 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':'');

добавляет (например) ниже к 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  
2018-09-21 22:19:03

вот два шага решения вот хак для 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 Tutorial

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

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

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

58  
2014-10-08 05:56:56

я писал их и вносил в них свой вклад 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  
2017-04-04 16:31:04

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

вы можете использовать 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, как Боузер:

https://github.com/ded/bowser

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

http://modernizr.com/

1  
2017-05-23 15:10:45

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

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

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

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

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

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

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

1  
2014-07-22 07:44:02

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

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

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

0  
2014-03-17 08:46:42

Comments

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