Jak napisać CSS hack dla IE 11? [duplikat]

To pytanie ma już odpowiedź tutaj:

Jak mogę zhakować lub napisać css tylko dla IE 11? Mam stronę, która źle wygląda w IE 11.Po prostu szukam tu i tam, ale nie znalazłem jeszcze żadnego rozwiązania.

Czy Jest jakiś selektor css?

Author: Paul Sweatte, 2013-12-12
Source

8 answers

Użyj kombinacji specyficznych dla Microsoft reguł CSS do filtrowania 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>

Filtry takie jak ta działają ze względu na:

Gdy agent użytkownika nie może przetworzyć selektora (tzn. nie jest poprawny CSS 2.1), musi zignorować Selektor i poniższy blok deklaracji (jeśli istnieje). 

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

Referencje

 207
Author: Paul Sweatte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-23 21:29:31

W świetle rozwijającego się wątku zaktualizowałem poniżej:]}

IE 6 

* html .foo {property:value;}

Lub 

.foo { _property:value;}

IE 7 

*+html .foo {property:value;}

Lub 

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

IE 6 i 7 

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

Lub 

.foo { *property:value;}

Lub 

.foo { #property:value;}

IE 6, 7 i 8 

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

IE 8 

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

Lub 

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

Tylko tryb standardów IE 8 

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

IE 8,9 i 10 

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

TYLKO IE 9 

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

IE 9 i wyżej 

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

IE 9 i 10

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

TYLKO IE 10 

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

IE 10 i wyżej 

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

Lub 

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

IE 11 (i wyżej..)

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

Javascript alternatives

Modernizr

Modernizr działa szybko przy ładowaniu strony w celu wykrycia funkcji; wtedy tworzy obiekt JavaScript z wynikami i dodaje klasy do element html

Agent użytkownika wybór

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

Dodaje (np.) poniższy element do 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'

Pozwala na bardzo ukierunkowane selektory CSS, np.: 

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

Przypis

Jeśli to możliwe, zidentyfikuj i napraw wszelkie problemy bez hacków. Wsparcie progressive enhancement oraz graceful degradation. Jest to jednak scenariusz "świata idealnego" nie zawsze możliwy do osiągnięcia, jako taki - powyższy powinien pomóc w dostarczeniu dobrego opcje.

Atrybucja / Niezbędna Lektura

 180
Author: SW4,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-21 19:19:03

Oto rozwiązanie dwuetapowe oto hack do IE10 i 11 

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}
Ponieważ IE10 i IE11 obsługuje-ms-high-cotrast, możesz skorzystać z tego, aby kierować te dwie przeglądarki

I jeśli chcesz wykluczyć IE10 z tego musisz utworzyć kod IE10, jak następuje to za pomocą sztuczki agenta użytkownika musisz dodać ten Javascript 

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

I ten znacznik HTML 

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

A teraz możesz napisać swój kod CSS w ten sposób 

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

Więcej informacje można znaleźć na tej stronie, wil tutorail, Chris Tutorial

A jeśli chcesz celować w IE11 i Później, oto co znalazłem: 

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

Oto świetny zasób, aby uzyskać więcej informacji: browserhacks.com

 58
Author: Hbirjand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-08 02:56:56

Pisałem je i przyczyniłem się do BrowserHacks.com od jesieni 2013-ten, który napisałem jest bardzo prosty i obsługiwany tylko przez IE 11.

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

I oczywiście div...

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

Więc tekst pokazuje się na niebiesko w internet explorer 11. Baw się dobrze.

-

Więcej IE i innych hacków CSS przeglądarki na mojej stronie testowej na żywo tutaj:

Aktualizacja: http://browserstrangeness.bitbucket.io/css_hacks.html

Lustro: http://browserstrangeness.github.io/css_hacks.html

(Jeśli szukasz również MS Edge CSS Hacki, to gdzie się udać.)

 21
Author: Jeff Clayton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-04 13:31:04

Możesz użyć następującego kodu wewnątrz znacznika style: 

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

Poniżej przykład, który zadziałał dla mnie: 

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

Należy pamiętać, że ponieważ (#NAV li) i (#nav a) znajdują się poza ekranem @ media..., są to style ogólne.

 6
Author: hoooman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-27 21:18:11

Możesz użyć js i dodać klasę w html, aby utrzymać standard komentarzy warunkowych : 

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

Lub użyj lib jak bowser:

Https://github.com/ded/bowser

Lub modernizr do wykrywania cech:

Http://modernizr.com/

 1
Author: Liko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:45

Więc w końcu znalazłem własne rozwiązanie tego problemu.

Po przejrzeniu dokumentacji Microsoftu udało mi się znaleźć nowy styl IE11 only msTextCombineHorizontal

W moim teście sprawdzam style IE10 i jeśli są one pozytywne, to sprawdzam styl tylko dla IE11. Jeśli go znajdę, to będzie to IE11+, jeśli nie, to będzie to IE10.

Przykład kodu: wykrywanie IE10 i IE11 przez testowanie zdolności CSS (JSFiddle)

zaktualizuję przykład kodu z większą liczbą stylów, gdy je odkrywam.

Uwaga: to prawie na pewno zidentyfikuje IE12 i IE13 jako "IE11", ponieważ te style prawdopodobnie będą kontynuowane. Dodam kolejne testy w miarę pojawiania się nowych wersji i mam nadzieję, że będę mógł ponownie polegać na Modernizrze.

Używam tego testu do zachowania awaryjnego. Zachowanie awaryjne jest po prostu mniej efektowną stylizacją, nie ma ograniczonej funkcjonalności.

 1
Author: HDT,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 04:44:02

I found this helpful 

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

Dodaj to pod swoim <head> dokumentem

 0
Author: ikke aviy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-17 06:46:42