Come si fa a destinazione IE7 e IE8 con CSS valido?

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

Domanda

Voglio target IE7 e IE8 con W3C CSS conformi.A volte fissaggio CSS per una versione non riuscite per gli altri.Come posso realizzare questo?

È stato utile?

Soluzione

Targeting esplicito delle versioni di IE senza hacking utilizzando HTML e CSS

Usa questo approccio se non vuoi hackerare nel tuo CSS. Aggiungi una classe unica per il browser all'elemento <html> in modo da poterlo selezionare in base al browser in un secondo momento.

Esempio 

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

Quindi nel tuo CSS puoi accedere in modo molto rigoroso al tuo browser di destinazione.

Esempio 

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

Per ulteriori informazioni, consulta http://html5boilerplate.com/

Targeting di versioni IE con CSS " Hacks "

Ancora di più, ecco gli hack che ti consentono di scegliere come target le versioni di IE.

Usa " \ 9 " come target IE8 e versioni precedenti.
Usa & Quot; * & Quot; come target per IE7 e precedenti.
Usa & Quot; _ & Quot; come target per IE6.

Esempio: 

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 */
}

Aggiornamento: Target IE10

IE10 non riconosce le istruzioni condizionali, quindi puoi usarle per applicare un " ie10 " classe all'elemento <=> 

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

Altri suggerimenti

Consiglierei di esaminare i commenti condizionali e di creare un foglio separato per gli IE con cui si riscontrano problemi. 

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

La risposta alla tua domanda

Un modo completamente valido per selezionare tutti i browser tranne IE8 e inferiori sta usando la pseudo-classe :not(). Poiché IE versione 8 e successive non supportano :first-child, i selettori che lo contengono vengono ignorati. Ciò significa che potresti fare qualcosa del genere: 

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

Questo è ancora completamente valido CSS, ma fa sì che IE8 e versioni precedenti rendano stili diversi (e anche Opera < 9.5 e Safari < 3.2).

Altri trucchi

Ecco un elenco di tutti i selettori specifici del browser CSS completamente validi che ho trovato, tranne per alcuni che sembrano abbastanza ridondanti, come quelli che selezionano solo per 1 tipo di browser antico ( 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 */

Crediti & amp; Fonti:

Per una lista più completa nel 2015:

IE 6

* html .ie6 {property:value;}

o

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

o

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

IE 6 e 7

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

o

.ie67 { *property:value;}

o

.ie67 { #property:value;}

IE 6, 7 e 8

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

IE 8

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

o

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

IE 8 Modalità Standard Solo

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

IE 8, 9 e 10

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

IE 9

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

IE 9 e sopra

@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

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

IE 10 e sopra

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

o

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

IE 11 (e sopra..)

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

Javascript alternative

Modernizr

Modernizr corre veloce al caricamento della pagina, per rilevare le caratteristiche;poi crea un oggetto JavaScript con i risultati, e aggiunge classi per l' elemento html

Agente utente di selezione

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

Aggiunge (e.g) il sottostante al html elemento:

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'

Che consente di mira selettori CSS, ad esempio:

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

Nota a piè di pagina

Se possibile, evitare di browser di destinazione.Identificare e risolvere qualsiasi problema(s) identificati.Supporto progressivo miglioramento e graceful degradation.Con questo in mente, questo è un "mondo ideale' scenario non sempre ottenibili in un ambiente di produzione, in quanto tali, di cui sopra dovrebbe aiutare a fornire alcune buone opzioni.

Attribuzione / Lettura Essenziale

Beh, non devi davvero preoccuparti che il codice IE7 non funzioni in IE8 perché IE8 ha la modalità di compatibilità (può rendere le pagine uguali a IE7). Ma se vuoi ancora scegliere come target versioni diverse di IE, un modo che è stato fatto per un po 'di tempo è usare commenti condizionali o inizia la tua regola css con a * destinato a IE7 e precedenti . Oppure potresti prestare attenzione al programma utente sui server e creare un altro file CSS basato su tali informazioni.

Il vero problema non è IE8, ma gli hack che usi per le versioni precedenti di IE.

IE8 è abbastanza vicino per essere conforme agli standard, quindi non dovresti aver bisogno di alcun hack per questo, forse solo alcune modifiche. Il problema è se stai usando alcuni hack per IE6 e IE7; dovrai assicurarti che si applichino solo a quelle versioni e non a IE8.

Ho reso il sito Web della nostra azienda compatibile con IE8 qualche tempo fa. L'unica cosa che ho effettivamente cambiato è stata l'aggiunta del meta tag che dice a IE che le pagine sono conformi a IE8 ...

L'ho fatto usando Javascript. Aggiungo tre classi CSS all'elemento html: 

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

Quindi per IE7 aggiunge ie7, lte-ie7 ..., lt-ie8 ...

Ecco il codice 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);
                }
            }
        }
    }
})();

Successivamente, usi la classe .ie<version> css nel tuo foglio di stile come descritto da potench.

(utilizzata la funzione detectIE di Mario in Verifica se l'utente sta utilizzando IE con jQuery )

Il vantaggio di avere lte-ie8 e lt-ie8 ecc. è che puoi scegliere come target tutti i browser inferiori o uguali a IE9, ovvero IE7 - IE9.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top