Como escrever um hack CSS para o IE 11? [duplicado]

[[2] esta pergunta já tem uma resposta aqui:

Como posso hackear ou escrever css só para o IE 11? Tenho um site que parece mau no IE 11.Eu só procuro aqui e ali, mas ainda não encontrei nenhuma solução.

Há algum selector de css?

Author: Paul Sweatte, 2013-12-12
Source

8 answers

Usar uma combinação de regras CSS específicas da Microsoft para filtrar 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>

Filtros como este funcionam devido ao seguinte:

Quando um agente de Utilizador não pode processar o selector (isto é, não é válido o CSS 2.1), deve ignorar o selector e o seguinte bloco de declaração (se existir) também. 

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

Referências

 207
Author: Paul Sweatte, 2017-08-23 21:29:31

À luz da evolução do fio, actualizei o seguinte:

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

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

Ou 

.foo { *property:value;}

Ou 

.foo { #property:value;}

IE 6, 7 e 8 

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

IE 8 

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

Ou 

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

IE 8 apenas modo padrão 

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

IE 8,9 e 10 

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

IE 9 apenas 

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

IE 9 e superior 

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

IE 9 e 10 

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

IE 10 apenas 

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

IE 10 e superior 

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

Ou 

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

IE 11 (e acima..)

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

Alternativas Javascript

Modernizr

O Modernizr corre rapidamente na carga da página para detectar as funcionalidades; depois cria um objecto JavaScript com os resultados, e adiciona classes ao elemento html

Agente do utilizador selecção

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

Adiciona (por exemplo) o elemento abaixo a 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'

Permitindo selectores de CSS muito direccionados, por exemplo: 

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

Nota de rodapé

Se possível, identificar e resolver qualquer problema ou problemas sem hacks. Suporte aprimoramento progressivo e degradação graciosa. No entanto, este é um cenário de "mundo ideal" que nem sempre é possível obter, como tal-o acima deve ajudar a fornecer algum bom Opcao.

Atribuição / Leitura Essencial
 180
Author: SW4, 2018-09-21 19:19:03
Aqui está uma solução de dois passos aqui está um hack para IE10 e 11 
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

Porque os suportes IE10 e IE11-ms-alto-cotrasts você pode aproveitar esta vantagem para atingir estes dois navegadores

E se quiser excluir o IE10 disto, tem de criar um código específico do IE10, como segue está a usar o truque do agente de utilizador, tem de adicionar este Javascript 

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

E esta marca de HTML 

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
E agora podes escrever o teu código CSS assim. 
html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}

Para mais informações consultar este sítio Web, wil tutorail, Tutorial do Chris

E se quiser atingir a IE11 e mais tarde, eis o que encontrei: 
_:-ms-fullscreen, :root .selector {}

Aqui está um grande recurso para obter mais informações: browserhacks.com

 58
Author: Hbirjand, 2014-10-08 02:56:56
Tenho andado a escrevê-las e a contribuir para BrowserHacks.com desde o outono de 2013-este eu escrevi é muito simples e só suportado pelo IE 11. 
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
E, claro, o div... 
<div class="msie11">
    This is an Internet Explorer 11 CSS Hack
<div>
Então o texto aparece em azul com o internet explorer 11. Diverte-te com isso.

-

Mais IE e outros hacks de navegação CSS no meu site de testes ao vivo aqui:

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

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

(Se você também está procurando por Hacks MS Edge CSS, é para onde ir.)

 21
Author: Jeff Clayton, 2017-04-04 13:31:04

Pode usar o seguinte código dentro da marca de estilo: 

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

Abaixo está um exemplo que funcionou para mim: 

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

Por favor, note que desde (#nav li) e (#nav A) estão fora do ecrã @media ..., são estilos gerais.

 6
Author: hoooman, 2014-03-27 21:18:11

Pode usar o js e adicionar uma classe no html para manter o padrão dos comentários condicionais :

  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 usar uma lib como o bowser:

Https://github.com/ded/bowser

Ou modernizr para detecção de características:

Http://modernizr.com/

 1
Author: Liko, 2017-05-23 12:10:45
Por isso, acabei por encontrar a minha própria solução para este problema.

Depois de procurar por documentação da Microsoft consegui encontrar um novo estilo único IE11msTextCombineHorizontal

No meu teste, verifico os estilos IE10 e, se forem compatíveis, procuro o único estilo IE11. Se eu o encontrar, então é IE11+, se eu não o encontrar, então é IE10.

Exemplo de código: detectar IE10 e IE11 por testes de capacidade CSS (JSFiddle)

Eu actualizarei o exemplo de código com mais estilos quando os descubro.

Nota: isto quase certamente identificará IE12 e IE13 como "IE11", pois esses estilos provavelmente seguirão adiante. Vou adicionar mais testes à medida que novas versões se desenrolam, e espero ser capaz de confiar novamente em Modernizr. Estou a usar este teste para comportamento de recuo. O comportamento de retrocesso é apenas menos glamouroso estilo, ele não tem funcionalidade reduzida.
 1
Author: HDT, 2014-07-22 04:44:02

Achei isto útil 

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

Adicione isto no seu <head> Documento

 0
Author: ikke aviy, 2014-03-17 06:46:42