Intenté poner el IE condicional en un archivo CSS, pero eso no pareció funcionar. ¿Hay un constructo para CSS para que pueda indicarle que use este color de fondo si el navegador es IE? Además, no pude encontrar nada en los condicionales, ¿existen? ¿Alguien puede dar un ejemplo?¿Pones IE condicionales en el archivo css o en el archivo html?
Los condicional (es) de IE van en el HTML, y se deben usar para incluir un archivo CSS adicional que sobrescribirá CSS según sea necesario para los hacks de IE.
Ejemplo:
<head>
<style type="text/css">
@import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
El [comentarios condicionales] (http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) son comentarios HTML y por lo tanto no se puede utilizar en un contexto CSS
Si desea apuntar reglas CSS específicas sólo para. IE, tienes que utilizar hacks de CSS.
He seguido mi ejemplo desde jQuery y uso mi formato condicional para crear elementos de contenedor
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
entonces puedo poner la información condicional en css como tales
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
no hay tal condicionales en CSS, pero se puede utilizar el "acebo Hack" si las diferencias entre las diversas versiones de IE aren 't significativa:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
yo recomendaría usar algo similar a la solución propuesta por bendewey, pero ir a clases condicionales alrededor de la etiqueta html en su lugar. Por lo que yo sé que esto fue mencionada por primera vez en el blog de Paul irlandesa (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
y luego en el css que utilizar:
.box {background: blue;}
.ie7 .box {background: green;}
Esto tiene algunas ventajas en comparación con la solución usando un extra div. Para los detalles, consulte la publicación anterior.
Uso este truco, yo mismo. Hace que sus archivos CSS sean más ordenados * y * evita que tenga que preocuparse por la precedencia del selector. –
Enfoque interesante, no había visto esto antes. Personalmente prefiero mantener mi marcado limpio que mi CSS. ¡Pero a cada uno lo suyo! –
+1 por el ingenioso truco. – Ishmael