Como é que um alvo IE7 e IE8 com CSS válido?

StackOverflow https://stackoverflow.com/questions/814219

Pergunta

Eu quero direcionar o IE7 e IE8 com CSS W3C-compliant. Às vezes, a fixação CSS para uma versão não corrigir para o outro. Como posso conseguir isso?

Foi útil?

Solução

Explicitamente versões alvo ou seja, sem hacks usando HTML e CSS

Use essa abordagem se você não quer hacks no seu CSS. Adicionar uma classe navegador original ao elemento <html> assim que você pode selecionar com base em página mais tarde.

Exemplo 

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Então em seu CSS você pode acessar de forma muito rigorosa o seu navegador de destino.

Exemplo 

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

Para mais verificação de informação para fora http://html5boilerplate.com/

Alvo IE versões com CSS "Hacks"

Mais para o ponto, aqui estão os hacks que permitem direcionar versões do IE.

Use "\ 9" para segmentar IE8 e abaixo.
Use "*" para segmentar IE7 e abaixo.
Use "_" para segmentar IE6.

Exemplo: 

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Update: Alvo IE10

IE10 não reconhece os comandos condicionais para que você pode usar isso para aplicar uma classe "IE10" para o elemento <html> 

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

Outras dicas

Eu recomendaria olhando para comentários condicionais e fazer uma folha separada para os IEs que você está tendo problemas com. 

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

A resposta à sua pergunta

Uma maneira completamente válido para selecionar todos os navegadores mas IE8 e abaixo está usando o :not() pseudo-classe. Desde versões do IE 8 e abaixo não suportam :not(), seletores que o contêm são ignorados. Isto significa que você poderia fazer algo parecido com isto: 

p {color:red;}
p:not([ie8min]) {color:blue;}

Este ainda é CSS completamente válido, mas ele faz causa IE8 e diminuir a prestar estilos diferentes (e também Opera <9.5 e Safari <3.2).

Outros truques

Aqui está uma lista de todos os seletores completamente válidos específicas do navegador CSS que eu poderia encontrar, , exceto para alguns que parecem bastante redundante, tais como aqueles que selecionam para apenas 1 tipo de navegador antigo ( 1 , 2 ): 

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

Créditos e fontes:

Para obter uma lista mais completa a partir de 2015:

IE 6 

* html .ie6 {property:value;}

ou 

.ie6 { _property:value;}

IE 7 

*+html .ie7 {property:value;}

ou 

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

IE 6 e 7 

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

ou 

.ie67 { *property:value;}

ou 

.ie67 { #property:value;}

IE 6, 7 e 8 

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

IE 8 

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

ou 

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

IE 8 Padrões modo somente 

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

IE 8,9 e 10 

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

IE 9 apenas 

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

IE 9 e acima 

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

IE 9 e 10 

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 única 

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

IE 10 e acima 

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

ou 

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

IE 11 (e acima ..) 

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

alternativas Javascript

Modernizr

Modernizr é executado rapidamente no carregamento da página para detectar características; isso então cria um objeto JavaScript com os resultados, e adiciona classes para o elemento html

selecção agente usuário

A 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) a seguir ao elemento html: 

data-useragent='Mozilla/5.0 (compatible; MSIE 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 seletores CSS muito direcionados, 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, navegador evitar segmentação. Identificar e corrigir qualquer problema (s) que você identificar. Suporte melhoria progressiva e degradação graciosa . Com isso em mente, este é um cenário de 'mundo ideal' nem sempre obtidos em um ambiente de produção, como such- acima deve ajudar a fornecer algumas opções boas.

Attribution / Essencial Reading

Bem, você realmente não precisa se preocupar com código de IE7 não funciona no IE8 porque IE8 tem modo de compatibilidade (que pode processar páginas o mesmo que IE7). Mas se você ainda quer atingir diferentes versões do IE, uma forma que tem sido feito por um tempo agora, quer seja para uso comentários condicionais ou começar sua regra css com um * para segmentar IE7 e abaixo . Ou você pode prestar atenção ao agente do usuário nos servidores e prato até um arquivo CSS diferente com base nessa informação.

O problema real não é IE8, mas os hacks que você usa para versões anteriores do IE.

IE8 é muito perto de ser compatível com as normas, para que você não deve precisar de qualquer hacks em tudo para ele, talvez apenas alguns ajustes. O problema é se você estiver usando alguns hacks para IE6 e IE7; você terá que se certificar de que eles só se aplicam a essas versões e não IE8.

Eu fiz o web site da nossa empresa compatível com IE8 há um tempo atrás. A única coisa que eu realmente mudou foi adicionando a meta tag que diz IE que as páginas são IE8 compatível ...

Eu fiz isso usando Javascript. I adicionar três classes css para o elemento html: 

ie<version>
lte-ie<version>
lt-ie<version + 1>

Assim, para IE7, ele adiciona ie7, lte-ie7 ..., lt-ie8 ...

Aqui está o código javascript: 

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

Depois disso, você usa a classe css .ie<version> em sua folha de estilo, como descrito por potench.

(Usado função detectIE de Mario em se o usuário está usando o IE com jQuery )

O benefício de ter LTE-IE8 e lt-IE8 etc é que você pode direcionar todas navegador menor ou igual ao IE9, que é IE7 -. IE9

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top