Aplicar estilo apenas no IE

184

Aqui está o meu bloco de CSS:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

Eu quero apenas o IE 7, 8 e 9 para "ver" width: 100%

Qual é a maneira mais simples de conseguir isso?

Faixa rápida
fonte
1
Por que você está tentando fazer isso? Quais versões do IE você está segmentando? E o IE10? (não suporta os habituais comentários condicionais)
thirtydot
Estou tentando segmentar o IE 7, 8 e 9. #
FastTrack
Que motivo você poderia ter para segmentar o IE9, mas não o IE10? Eu adoraria saber ...
thirtydot
1
O IE não interpreta width: autoelementos de bloco da mesma maneira que outros navegadores, como Firefox ou Chrome. No Chrome / Firefox width:auto, a largura de um elemento de bloco aumentará a largura total de seu contêiner. O IE não faz isso e requer #width: 100%
FastTrack 23/06
1
alguem ja tentou isso? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css
Pramesh Bajracharya

Respostas:

102

Atualização 2017

Dependendo do ambiente, os comentários condicionais foram oficialmente reprovados e removidos no IE10 +.


Original

A maneira mais simples é provavelmente usar um comentário condicional do Internet Explorer no seu HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

Existem vários hacks (por exemplo, o sublinhado hack ) que você pode usar para segmentar apenas o IE na sua folha de estilo, mas fica muito confuso se você deseja direcionar todas as versões do IE em todas as plataformas.

James Allardice
fonte
10
Existe alguma maneira de usar esse comentário condicional dentro do meu arquivo CSS? Eu queria evitar bagunçar meu HTML se pudesse ajudá-lo.
FastTrack 23/06
2
@FastTrack - Não, os comentários condicionais são comentários em HTML; portanto, eles precisam aparecer na sua marcação. Costumo criar uma nova folha de estilo apenas para o IE e incluí-la normalmente nos comentários condicionais.
precisa
James: Eu estava pensando em fazer isso, mas então tenho que lidar com a atualização de duas folhas de estilo separadas toda vez que quero mudar alguma coisa, certo?
FastTrack 23/06
3
@FastTrack - Não, sua folha de estilo do IE conteria apenas estilos específicos para o IE. Inclua-o após a folha de estilo principal, para que você possa substituir os estilos definidos em sua folha de estilo principal, quando necessário. Portanto, você só precisará atualizá-lo se quiser alterar algo específico para o IE.
precisa
1
@FastTrack - Sim. Quando algo é especificado em mais de uma folha de estilo, a incluída mais tarde tem precedência.
precisa
284
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Explicação: É uma consulta de mídia específica da Microsoft. Usando a propriedade -ms-high-contrast específica para o Microsoft IE, ela será analisada apenas no Internet Explorer 10 ou superior. Eu usei os dois valores válidos da consulta de mídia, para que ela seja analisada apenas pelo IE, independentemente de o usuário ter alto contraste ativado ou não.

Himanshu Dwivedi
fonte
6
só que não funciona no novo internet-explorer (borda), tem de adicioná-lo sem MS também
Saad Ahmed
6
Veja aqui para a borda de segmentação: stackoverflow.com/questions/28417056/…
Phyllis Sutherland
6
@SaadAhmed: Isso é realmente um problema? O Edge é um navegador razoavelmente bem comportado, muito melhor do que o IE, de modo que muitos hacks do IE provavelmente não serão necessários (ou prudentes)?
Michael Scheper
1
Bem, isso resolveu meus problemas estúpidos do IE. Obrigado pela correção!
Jester
1
@MichaelScheper Este bug postado no primeiro comentário ainda se aplica à mais recente borda (17 de hoje). A pequena correção de Saad me ajudou a remover essa peculiaridade.
precisa saber é o seguinte
54

Além dos comentários condicionais do IE, esta é uma lista atualizada de como direcionar o IE6 para o IE10.

Veja hacks específicos de CSS e JS além do IE .

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}
Oriol
fonte
1
Estou tentado \9e \0/para displayem um seletor de classe, mas ambos serão aplicadas a IE10 também. Existe alguma maneira de se candidatar apenas ao IE9 [e abaixo ou não]?
Tom Brito
Você pode tentar: \0/IE9mas não o testou. Caso contrário, não conheço outra maneira de segmentar o IE9, a menos que você use cláusulas condicionais:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
Oriol
1
O @media screen and (min-width:0\0) {hack parece ser analisado também pelo IE11 - portanto, não são apenas 9 e 10 - verifique e atualize seus comentários.
Rolf
Usei a tela @media e (-ms-alto-contraste: ativo), (-ms-alto-contraste: nenhum) {} funcionou bem.
Harsimer
43

Existem vários hacks disponíveis para o IE

Usando comentários condicionais com folha de estilo

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

Usando comentários condicionais com a seção principal css

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

Usando comentários condicionais com elementos HTML

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Usando consulta de mídia

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }
Santosh Khalse
fonte
Observe que o último listado ( min-width:0\0) também se aplica ao IE11
CBarr
26

Além de um comentário condicional, também é possível usar o Seletor de navegador CSS http://rafael.adm.br/css_browser_selector/, pois isso permitirá que você direcione navegadores específicos. Você pode então definir seu CSS como

.ie .actual-form table {
    width: 100%
    }

Isso também permitirá que você direcione navegadores específicos na sua folha de estilo principal sem a necessidade de comentários condicionais.

frontendzzzguy
fonte
Isto não parece ter qualquer efeito no IE9
FastTrack
Não vejo por que não, tente .ie9 .actual-form table {width: 100%} no seu CSS. Espero que isso funcione para você.
frontendzzzguy
.ie9não funciona porque não foi atualizado desde 2010.
Hanna
Esta é definitivamente a abordagem mais elegante. Pessoalmente, prefiro adicionar o lado do servidor dos seletores de CSS do navegador ao renderizar a página.
opsb
1
isso funciona se você usar cadeias de agentes e adicionar dinamicamente a classe seletora ao corpo.
Pikapika
6

Eu acho que, para as melhores práticas, você deve escrever uma declaração condicional do IE dentro da <head>tag que dentro tem um link para sua folha de estilo especial, ou seja. Isso tem que ser após o seu link css personalizado, para que substitua o último, eu tenho um site pequeno, então eu uso o mesmo, ou seja, css para todas as páginas.

<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

isso difere da resposta de James como eu penso (opinião pessoal porque trabalho com uma equipe de designers e não quero que eles toquem meus arquivos html e atrapalhem alguma coisa lá). Você nunca deve incluir estilos no seu arquivo html.

elad prata
fonte
6

Um pouco tarde, mas isso funcionou perfeitamente para mim ao tentar ocultar o plano de fundo do IE6 e 7

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

Eu obtive esse hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}
osouthgate
fonte
5

Bem-vindo BrowserDetect - uma função incrível.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

O Object BrowserDetect também fornece versioninformações para que possamos adicionar classes específicas - por exemplo, $('*').addClass('ie9');E se(BrowserDetect.version == 9) .

Boa sorte....

Akash
fonte
4

Realmente depende das versões do IE ... Encontrei este excelente recurso atualizado do IE6-10 :

Corte de CSS para o Internet Explorer 6

É chamado de Star HTML Hack e tem a seguinte aparência:

  • html .color {color: # F00;} Este hack usa CSS totalmente válido.

Corte de CSS para o Internet Explorer 7

É chamado de Star Plus Hack.

*: primeiro filho + html .color {color: # F00;} Ou uma versão mais curta:

* + html .color {color: # F00;} Como o hack de estrela em HTML, ele usa CSS válido.

Corte de CSS para o Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Este hacks não usa CSS válido.

Corte de CSS para o Internet Explorer 9

: root .color {color: # F00 \ 9;} Este hacks também não usa CSS válido.

Adicionado em 02.02.2013: Infelizmente, o IE10 entende esse hack.

Corte de CSS para o Internet Explorer 10

@media screen e (-ms-alto-contraste: ativo), (-ms-alto-contraste: nenhum) {.color {color: # F00;}} Este hacks também não usa CSS válido.

Pykler
fonte
O último também se aplica ao IE11
CBarr
2

Para / * Internet Explorer 9+ (uma linha) * /

_::selection, .selector { property:value\0; }

Somente esta solução funciona perfeitamente para mim.

Rahi.Shah
fonte
Eu sei que este é um necrocomente, mas isso parece super liso. No entanto, não tenho certeza do que exatamente está fazendo, pois parece um pouco misterioso / bizantino. Alguém conhece a semântica dessa afirmação? (como o _ :: e \ 0 no final?)
Adam R. Turner
1
Também se aplica a regra para o Chrome: /
trincot
2
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}
dxc111
fonte
2

Para o IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

Este funciona no Edge e em todos os IEs

:-ms-lang(x), .selector { color: red; }
Srinivasan N
fonte