internet-explorer <!--[if - ¿Cómo se dirige IE7 e IE8 con CSS válido?




10]> html (7)

Quiero apuntar a IE7 e IE8 con CSS compatible con W3C. A veces, la corrección de CSS para una versión no soluciona la otra. ¿Cómo puedo conseguir esto?


Answers

El problema real no es IE8, sino los hacks que usa para versiones anteriores de IE.

IE8 está bastante cerca de ser compatible con los estándares, por lo que no debería necesitar ningún truco para eso, tal vez solo algunos ajustes. El problema es si estás usando algunos hacks para IE6 e IE7; Deberá asegurarse de que solo se apliquen a esas versiones y no a IE8.

Hice que el sitio web de nuestra empresa sea compatible con IE8 hace un tiempo. Lo único que realmente cambié fue agregar la metaetiqueta que le dice a IE que las páginas son compatibles con IE8 ...


Yo recomendaría buscar comentarios condicionales y hacer una hoja separada para los IE con los que tenga problemas.

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

Lo hice usando Javascript. Agrego tres clases de CSS al elemento html:

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

Entonces para IE7, agrega lte-ie7 , lte-ie7 ..., lt-ie8 ...

Aquí está el código de 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);
                }
            }
        }
    }
})();

A partir de entonces, utiliza la clase .ie<version> css en su hoja de estilo tal como lo describe potench.

(Se utilizó la función detectIE de Mario en Comprobar si el usuario está utilizando IE con jQuery )

El beneficio de tener lte-ie8 y lt-ie8, etc. es que se puede orientar a todos los navegadores menores o iguales que IE9, es decir IE7 - IE9.


Apunta explícitamente a las versiones de IE sin hackear usando HTML y CSS

Utilice este enfoque si no quiere hacks en su CSS. Agregue una clase exclusiva del navegador al elemento <html> para que pueda seleccionar en función del navegador más adelante.

Ejemplo

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

Luego, en su CSS, puede acceder muy estrictamente a su navegador de destino.

Ejemplo

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

Para obtener más información, consulte http://html5boilerplate.com/

Target versiones de IE con CSS "Hacks"

Más a su punto, aquí están los hacks que le permiten atacar las versiones de IE.

Use "\ 9" para apuntar a IE8 y abajo.
Use "*" para apuntar a IE7 y abajo.
Use "_" para apuntar a IE6.

Ejemplo:

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

Actualización: objetivo IE10

IE10 no reconoce las instrucciones condicionales, por lo que puede usar esto para aplicar una clase "ie10" al elemento <html>

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

La respuesta a tu pregunta

Una forma completamente válida para seleccionar todos los navegadores, pero IE8 e inferior está usando la pseudoclase :not() . Como las versiones IE 8 y siguientes no son compatibles con :not() , los selectores que lo contienen no se tienen en cuenta. Esto significa que podrías hacer algo como esto:

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

Esto sigue siendo un CSS completamente válido, pero causa IE8 y menos para representar estilos diferentes (y también Opera <9.5 y Safari <3.2).

Otros trucos

Aquí hay una lista de todos los selectores de navegador CSS completamente válidos que pude encontrar, a excepción de algunos que parecen bastante redundantes, como los que seleccionan solo 1 tipo de navegador antiguo ( 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 y fuentes:


Para obtener una lista más completa a partir de 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 y 7

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

o

.ie67 { *property:value;}

o

.ie67 { #property:value;}

IE 6, 7 y 8

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

IE 8

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

o

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

IE 8 solo modo estándar

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

IE 8,9 y 10

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

Solo IE 9

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

IE 9 y superior

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

IE 9 y 10

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

Solo IE 10

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

IE 10 y superior

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

o

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

IE 11 (y superior ...)

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

Alternativas de Javascript

Modernizr

Modernizr se ejecuta rápidamente en la carga de la página para detectar características; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html

Selección de agente de usuario

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

Agrega (por ejemplo) lo siguiente al 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'

Permitir selectores de CSS muy orientados, por ejemplo:

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

Nota

Si es posible, evite la orientación del navegador. Identifique y solucione cualquier problema que identifique. Admite mejora progresiva y degradación elegante . Con esto en mente, este es un escenario de "mundo ideal" que no siempre se puede obtener en un entorno de producción, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.

Atribución / lectura esencial


La solución aceptada como la respuesta es perfecta para usar line-height igual a la altura de div, pero esta solución no funciona perfectamente cuando el texto está ajustado O está en dos líneas.

Pruebe este si el texto está envuelto o está en varias líneas dentro de un div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Para más referencia, ver:





css internet-explorer internet-explorer-8 web-standards