Aplicar estilo SOLO en IE


184

Aquí está mi bloque 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;
}

Solo quiero que IE 7, 8 y 9 "vean" width: 100%

¿Cuál es la forma más sencilla de lograr esto?


1
¿Por qué estás tratando de hacer esto? ¿A qué versión (s) de IE está apuntando? ¿Qué hay de IE10? (no admite los comentarios condicionales habituales)
thirtydot

Estoy tratando de apuntar a IE 7, 8 y 9.
FastTrack

¿Qué razón podrías tener para apuntar a IE9 pero no a IE10? Me encantaría saber ...
thirtydot

1
IE no interpreta los width: autoelementos de bloque de la misma manera que otros navegadores como Firefox o Chrome. En Chrome / Firefox width:autoextenderá el ancho de un elemento de bloque al ancho total de su contenedor. IE no hace esto y requierewidth: 100%
FastTrack

Respuestas:


102

Actualización 2017

Dependiendo del entorno, los comentarios condicionales han sido oficialmente desaprobados y eliminados en IE10 +.


Original

Probablemente, la forma más sencilla es utilizar un comentario condicional de Internet Explorer en su HTML:

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

Hay numerosos hacks (por ejemplo, el hack de subrayado ) que puede usar que le permitirán apuntar solo a IE dentro de su hoja de estilo, pero se vuelve muy complicado si desea apuntar a todas las versiones de IE en todas las plataformas.


10
¿Hay alguna forma de usar ese comentario condicional dentro de mi archivo CSS? Quería evitar saturar mi HTML si podía evitarlo.
FastTrack

2
@FastTrack: no, los comentarios condicionales son comentarios HTML, por lo que deben aparecer en el marcado. Tiendo a crear una hoja de estilo completamente nueva solo para IE, y luego incluirla como normal dentro de los comentarios condicionales.
James Allardice

James: Estaba pensando en hacer esto, pero luego tengo que lidiar con la actualización de dos hojas de estilo separadas cada vez que quiero cambiar algo, ¿verdad?
FastTrack

3
@FastTrack: no, su hoja de estilo de IE solo contendría estilos específicos de IE. Inclúyalo después de su hoja de estilo principal para que pueda anular los estilos establecidos en su hoja de estilo principal cuando sea necesario. Por lo tanto, solo necesitaría actualizarlo si desea cambiar algo específico de IE.
James Allardice

1
@FastTrack: sí. Cuando se especifica algo en más de una hoja de estilo, la que se incluye más adelante tiene prioridad.
James Allardice

284
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Explicación: es una consulta de medios específica de Microsoft. Usando la propiedad -ms-high-contrast específica de Microsoft IE, solo se analizará en Internet Explorer 10 o superior. He utilizado los dos valores válidos de la consulta de medios, por lo que IE solo la analizará, tanto si el usuario tiene habilitado el alto contraste como si no.


66
Sólo que no funciona en la nueva Internet-Explorer (borde), hay que añadir que, sin demasiado ms-
Saad Ahmed

66
Consulte aquí para obtener información sobre objetivos: stackoverflow.com/questions/28417056/…
Phyllis Sutherland

66
@SaadAhmed: ¿Eso es realmente un problema? Edge es un navegador que se comporta razonablemente bien, de todos modos es mucho mejor que IE, ¿por lo tanto, probablemente no sean necesarios (o prudentes) muchos hacks de IE?
Michael Scheper

1
Bueno, eso resolvió mis estúpidos problemas de IE. Gracias por la solución!
Jester

1
@MichaelScheper Este error publicado en el primer comentario todavía se aplica en el último borde (17 por hoy). La pequeña solución de Saad me ayudó a eliminar esta peculiaridad.
SimonRabbit

54

Además de los comentarios condicionales de IE, esta es una lista actualizada sobre cómo orientar IE6 a IE10.

Vea hacks específicos de CSS y JS más allá de 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; }
}

1
Estoy intentado \9y \0/para displayen un selector de clase, pero ambos se aplicará a IE10 también. ¿Hay alguna forma de solicitar solo IE9 [y menos o no]?
Tom Brito

Puedes intentarlo, \0/IE9pero no lo has probado. De lo contrario, no conozco otra forma de dirigirme a IE9 a menos que use cláusulas condicionales:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
Oriol

1
El @media screen and (min-width:0\0) {truco también parece haber sido analizado por IE11, por lo que no son solo 9 y 10, verifique y actualice sus comentarios.
Rolf

Usé @media screen y (-ms-high-contrast: active), (-ms-high-contrast: none) {} Funcionó bien.
Harsimer

43

Hay varios hacks disponibles para IE

Usar comentarios condicionales con hoja de estilo

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

Usar comentarios condicionales con la sección de encabezado css

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

Usar comentarios condicionales con elementos HTML

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

Usar consulta de medios

 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; }
 }

Tenga en cuenta que el último listado ( min-width:0\0) también se aplica a IE11
CBarr

26

Además de un comentario condicional, también podría usar el selector de navegador CSS http://rafael.adm.br/css_browser_selector/ ya que esto le permitirá dirigirse a navegadores específicos. Luego puede configurar su CSS como

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

Esto también le permitirá apuntar a navegadores específicos dentro de su hoja de estilo principal sin la necesidad de comentarios condicionales.


Esto no parece tener ningún efecto en IE9
FastTrack

No veo por qué no, intente .ie9 .actual-form table {width: 100%} en su CSS. Espero que eso funcione para ti.
frontendzzzguy

.ie9no funciona porque no se ha actualizado desde 2010.
Hanna

Este es definitivamente el enfoque más elegante. Personalmente, prefiero agregar el navegador del servidor de selectores CSS al renderizar la página.
opsb

1
esto funciona si usa cadenas de agente y agrega dinámicamente la clase de selector al cuerpo.
pikapika

6

Creo que, para las mejores prácticas, debe escribir una declaración condicional de IE dentro de la <head>etiqueta que dentro tiene un enlace a su hoja de estilo especial, es decir. Esto TIENE QUE SER después de su enlace css personalizado, por lo que anula el último, tengo un sitio pequeño, así que uso el mismo, es decir, css para todas las 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]-->

Esto difiere de la respuesta de James como creo (opinión personal porque trabajo con un equipo de diseñadores y no quiero que toquen mis archivos html y estropeen algo allí). Nunca debe incluir estilos en su archivo html.


6

Un poco tarde en esto, pero esto funcionó perfectamente para mí al intentar ocultar el fondo para IE6 y 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;
}

Obtuve este truco a través de: 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 */
}

5

Bienvenido BrowserDetect : una función increíble.

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

El Object BrowserDetect también proporciona versioninformación para que podamos añadir clases específicas - por ej. $('*').addClass('ie9');si (BrowserDetect.version == 9).

Buena suerte....


4

Realmente depende de las versiones de IE ... Encontré este excelente recurso que está actualizado desde IE6-10 :

Hack CSS para Internet Explorer 6

Se llama Star HTML Hack y tiene el siguiente aspecto:

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

Hack CSS para Internet Explorer 7

Se llama Star Plus Hack.

*: first-child + html .color {color: # F00;} O una versión más corta:

* + html .color {color: # F00;} Al igual que el hack HTML estrella, este usa CSS válido.

Hack CSS para Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Este truco no utiliza CSS válido.

Hack CSS para Internet Explorer 9

: root .color {color: # F00 \ 9;} Este pirateo tampoco utiliza CSS válido.

Agregado 2013.02.04: Desafortunadamente IE10 entiende este truco.

Hack CSS para Internet Explorer 10

@media screen y (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Este pirateo tampoco utiliza CSS válido.


El último también se aplica a IE11
CBarr

2

Para / * Internet Explorer 9+ (una línea) * /

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

Solo esta solución funciona perfectamente para mí.


Sé que esto es un necrocomment, pero se ve muy elegante. Sin embargo, no estoy seguro de qué está haciendo exactamente, ya que parece un poco arcano / bizantino. Alguien sabe la semántica de esta declaración? (como el _ :: y el \ 0 al final?)
Adam R. Turner

1
También aplica la regla para Chrome: /
trincot

2
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

2

Para 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 en Edge y todos los IE

:-ms-lang(x), .selector { color: red; }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.