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?


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.


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/


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

2

CSS Hack para IE9

/* Hack CSS IE9 */
.csshackie9 {color:#f00\9\0\;}

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