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

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