CSS \ 9 en propiedad de ancho

209

¿Cuál es el significado de este? Supongo que es un truco del navegador, pero no he podido encontrar qué hace exactamente.

width: 500px\9;

¿Cuál es el significado de \9?

css width css-hack Bueno en realidad
fuente
en un archivo CSS ... establecer el ancho de algún elemento.
Bueno, en realidad el
no es un duplicado exacto, pero esta pregunta le responde: stackoverflow.com/questions/701732/size-in-css-with-slash
Raptor
no parece ser válido en ninguna versión de CSS, por lo que puedo ver ...
Marc B
No creo que esta pregunta se refiera a lo mismo.
bueno, en realidad, el
66
@Shivan Raptor: No, no lo hace. Es una pregunta totalmente diferente.
BoltClock

Respuestas:

290

\9 es un "hack CSS" específico para Internet Explorer 7, 8 y 9.

Esto simplemente significa que la línea específica de CSS que termina \9;en lugar de ;solo es válida en IE 7, 8 y 9.

En tu ejemplo,

width: 500px\9;significa que un ancho de 500 píxeles (el mismo resultado que width: 500px;) solo se aplicará al usar IE 7, 8 y 9.

Todos los demás navegadores ignorarán por width: 500px\9;completo y, por lo tanto, no se aplicarán width: 500px;al elemento en absoluto.

Si tu CSS se veía así ...

#myElement {
    width: 300px;
    width: 500px\9;
}

El resultado sería de #myElement500 píxeles de ancho en IE 7, 8 y 9, mientras que en todos los demás navegadores, #myElementtendría 300 píxeles de ancho.

Más información

EDITAR:

Esta respuesta fue escrita en 2011. Ahora debe tenerse en cuenta que este truco también funciona en IE 10.

Chispeante
fuente
1
@ jdavid.net, si no rompe tu CSS, absolutamente nada, AFAIK.
Sparky
10
\0en lugar de \9aplicarlo también a IE10
abc123
21
@ abc123 esperemos que nunca lleguen a IE a la versión 16 entonces.
Hoffmann
44
En mi experiencia justo ahora, \9también estaba aplicando a IE 10 con una widthpropiedad, al menos en el modo de emulación de IE. El modo de emulación es defectuoso en el mejor de los casos, así que quizás es por eso.
davidjb
1
@davidjb, eso es porque no es realmente un emulador. Fue diseñado como una alternativa para el código anterior.
Sparky
13

Es un truco css para IE9 y versiones inferiores

escribe así:

width: 500px\9;

Lea este artículo http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

sandeep
fuente
44
Gracias por el enlace, pero el artículo no explica QUÉ hace.
Bueno, en realidad el
1
Usamos hack para IE por dos cosas. 1) hay algunas propiedades que no son compatibles con IE como display: inline-block & 2) Cada navegador representa algunas propiedades HTML y css de manera diferente. mira este artículo blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block
sandeep
Compruebe el enlace también coding.smashingmagazine.com/2010/06/07/…
sandeep
IE es compatible con display: inline-block ;, mal ejemplo.
reisio
Sin embargo, no parece ser un truco particularmente útil para la propiedad 'ancho'. Al menos no fuera del modo peculiaridades.
reisio
2

En IE9 para establecer la propiedad de ancho, simplemente agrega este truco.

p.ej

.align {
    float:left;
    margin:5px;
    background-color:blue;
    width:65px;
    width:\9 !important;
}
Asad Shah
fuente
2

CSS Hack para IE9

/* Hack CSS IE9 */
.csshackie9 {color:#f00\9\0\;}
gordi
fuente
77
deberías publicar más información sobre de qué se trata este truco en lugar de vincularlo afuera: si ese blog desaparece, el valor de tu respuesta disminuiría. Además, no todos hablan ruso.
Marcin Orlowski
1
Sería mejor proporcionar información esencial en inglés, porque el enlace que ha publicado es para el blog ruso.
Artemix
OP, debes decirte a ti mismo e ir y sentarte en el escalón travieso.
slugmandrew