Comment écrire un hack CSS pour IE 11? [dupliquer]

cette question a déjà une réponse ici:

  • Detecting IE11 using CSS Capability / Feature Detection"" 17 réponses

Comment puis-je pirater ou écrire css seulement pour IE 11? J'ai un site qui a l'air mauvais EN MI 11.Je cherche ici et là, mais je n'ai pas encore trouvé de solution.

est-ce qu'il y a un sélecteur css?

146
demandé sur Paul Sweatte 2013-12-12 14:45:44

8 réponses

utilisez une combinaison de règles CSS spécifiques à Microsoft pour filtrer 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>

filtres tels que ce travail en raison de ce qui suit:

Lorsqu'un agent utilisateur ne peut pas analyser le sélecteur (c.-à-d. qu'il n'est pas valide CSS 2.1), il doit ignorer le sélecteur et le bloc de déclaration suivant (s'il y a lieu). 

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

References

207
répondu Paul Sweatte 2017-08-23 21:29:31

à la lumière du fil évolutif, j'ai mis à jour le ci-dessous:

IE 6 

* html .foo {property:value;}

ou 

.foo { _property:value;}

IE 7 

*+html .foo {property:value;}

ou 

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

IE 6 et 7 

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

ou 

.foo { *property:value;}

ou 

.foo { #property:value;}

IE 6, 7 et 8 

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

IE 8 

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

ou 

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

IE 8 Mode Standard seulement 

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

IE 8,9 et 10 

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

IE 9 seulement 

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

IE 9 et plus 

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

IE 9 et 10 

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

IE 10 only 

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

IE 10 et plus 

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

ou 

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

IE 11 (et ci-dessus..) 

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

alternatives Javascript

Modernizr

Modernizr fonctionne rapidement sur la charge de page pour détecter les caractéristiques; Il puis crée un objet JavaScript avec les résultats, et ajoute des classes élément html

sélection de L'agent utilisateur

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

Adds(E. g) l'élément html ci-dessous:

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

permettant des sélecteurs CSS très ciblés, p.ex.: 

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

note de bas de page

si possible, identifier et corriger tout problème sans piratage. Soutien amélioration progressive et dégradation gracieuse . Cependant, il s'agit d'un "monde idéal" scénario qui n'est pas toujours réalisable, en tant que tel - ce qui précède devrait aider à fournir de bonnes options.

Attribution / Lecture Essentielle

180
répondu SW4 2018-09-21 19:19:03

Voici une solution en deux étapes voici un hack à IE10 et 11 

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

parce que IE10 et IE11 prend en charge-ms-high-cotrast vous pouvez en profiter pour cibler ces deux navigateurs""

et si vous voulez exclure le IE10 de cela, vous devez créer un code spécifique IE10 comme suit, il est en utilisant l'agent de l'utilisateur astuce, vous devez ajouter ce Javascript 

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

et cette balise HTML 

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

et maintenant vous pouvez écrire votre code CSS comme ceci 

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

pour plus d'informations veuillez vous référer à ces sites web, wil tutorail , Chris Tutorial

et si vous voulez cibler IE11 et plus tard,voici ce que j'ai trouvé: 

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

Voici une excellente ressource pour obtenir plus d'information: browserhacks.com

58
répondu Hbirjand 2014-10-08 02:56:56

je les ai écrit et contribué à BrowserHacks.com depuis l'automne 2013 -- celui que j'ai écrit est très simple et seulement soutenu par IE 11. 

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

et bien sûr la div... 

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

donc le texte apparaît en bleu avec internet explorer 11. Avoir du plaisir avec elle.

-

plus D'IE et d'autres piratages de navigateur CSS sur mon site de test en direct ici:

Mise à jour: http://browserstrangeness.bitbucket.io/css_hacks.html

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

(si vous êtes également à la recherche de Hacks MS Edge CSS, c'est où aller.)

21
répondu Jeff Clayton 2017-04-04 13:31:04

vous pouvez utiliser le code suivant à l'intérieur de l'étiquette de style: 

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

ci-Dessous est un exemple qui a fonctionné pour moi: 

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

veuillez noter que puisque (#nav li) et (#nav A) sont à l'extérieur de l'écran @media ... ce sont des styles généraux.

6
répondu hoooman 2014-03-27 21:18:11

vous pouvez utiliser js et ajouter une classe en html pour maintenir la norme de commentaires conditionnels : 

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

ou utiliser une lib comme bowser:

https://github.com/ded/bowser

Ou modernizr pour la détection de la fonctionnalité:

http://modernizr.com /

1
répondu Liko 2017-05-23 12:10:45

Donc, j'ai trouvé ma solution à ce problème à la fin.

après une recherche à travers Microsoft documentation j'ai réussi à trouver un nouveau IE11 seulement style msTextCombineHorizontal

dans mon test, je vérifie pour les styles IE10 et s'ils sont un match positif, alors je vérifie pour le style IE11 seulement. Si je le trouve, alors C'est IE11+, si Je ne le trouve pas, alors C'est IE10.

Exemple De Code: Détecter IE10 et IE11 par CSS Capacité de Test (JSFiddle)

je mettrai à jour l'exemple de code avec plus de styles quand je les découvrirai.

NOTE: cela va presque certainement identifier IE12 et IE13 comme "IE11", comme ces styles seront probablement reporter en avant. J'ajouterai d'autres tests au fur et à mesure que de nouvelles versions seront lancées, et j'espère pouvoir compter à nouveau sur Modernizr.

j'utilise ce test pour définir le comportement. Le comportement de repli est juste un style moins glamour, il n'a pas de fonctionnalité réduite.

1
répondu HDT 2014-07-22 04:44:02

j'ai trouvé ça utile 

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

ajoutez ceci sous votre <head> document

0
répondu ikke aviy 2014-03-17 06:46:42