219

What is the meaning of this? I am guessing it is a browser hack, but I have not been able to find what exactly it does.

width: 500px\9;

What is the significance of \9?

TylerH
  • 20,799
  • 66
  • 75
  • 101
well actually
  • 11,810
  • 19
  • 52
  • 70

4 Answers4

303

\9 is a "CSS hack" specific to Internet Explorer 7, 8, & 9.

This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9.

In your example,

width: 500px\9; means that a width of 500 pixels (same result as width: 500px;) will only be applied while using IE 7, 8, & 9.

All other browsers will ignore width: 500px\9; entirely, and therefore not apply width: 500px; to the element at all.

If your CSS looked like this...

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

The result would be #myElement 500 pixels wide in IE 7, 8, & 9, while in all other browsers, #myElement would be 300 pixels wide.

More info

EDIT:

This answer was written in 2011. It should now be noted that this hack also works in IE 10.

Edric
  • 24,639
  • 13
  • 81
  • 91
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • what would `width: 500px\6;` do? – jdavid.net Jan 08 '13 at 16:14
  • 1
    @jdavid.net, if it doesn't break your CSS, absolutely nothing, AFAIK. – Sparky Jan 08 '13 at 16:18
  • so there is a difference between `width: 500px\6;` and `width: 500px\9;` ? – jdavid.net Jan 08 '13 at 16:21
  • @Sparky - I'm sorry, but your comment makes no sense. It should work on IE9 (only), and people report that it does, but for me it doesn't. I am asking why – vsync Jun 30 '13 at 20:00
  • @vsync, it does not follow the W3 spec so it's non-compliant code, a hack. If other people report that it works on `background`, but it doesn't work only for you, then obviously something else must be wrong. If you want help with your code, post a question. – Sparky Jul 01 '13 at 13:40
  • @vsync, I only speak as if I'm responding to comments in the comment section. Again, if `background` is working for others, then how could anyone know your answer? – Sparky Jul 01 '13 at 15:00
  • 11
    `\0` instead of `\9` will apply it to IE10 as well – abc123 Oct 09 '13 at 21:26
  • 21
    @abc123 lets hope they never get IE to version 16 then. – Hoffmann Dec 17 '13 at 15:35
  • 4
    In my experience just now, ``\9`` was also applying to IE 10 with a ``width`` property, at least in IE's emulation mode. Emulation mode is buggy at the best of times, so perhaps that's why. – davidjb Apr 03 '14 at 02:20
  • 1
    @davidjb, that's because it's not really an emulator. It was designed as a fallback for older code. – Sparky Apr 03 '14 at 04:58
  • Just one extra note on this: If you use some tool like Sprockets(from Rails) that minifies the CSS this hack may break your build. – PedroSena May 28 '14 at 17:21
  • What is the significance of the number 9? Is it just an arbitrary number? Is it required for the hack to work? – Chris Bier Sep 21 '15 at 14:58
  • @ChrisBier, I believe it's fairly apparent that since this is an Explorer hack, the "9" signifies the Explorer version. Does it work without the `9`? Since this is a "hack" that does not follow the W3C standard, it's impossible to predict where/when/how this works. – Sparky Sep 21 '15 at 17:45
  • @Sparky the reason that I ask about the number is because I'm guessing the browser doesn't care about the number itself. For instance, does IE9 say "oh there's a 9 there that must be for me"? I am guessing that it is not the case being that it is a hack, so I am wondering if 9 is an arbitrary number. – Chris Bier Sep 22 '15 at 15:42
  • @ChrisBier *"does IE9 say "oh there's a 9 there that must be for me"?"* ~ Of course it does or this hack would not work at all. If you think it's an arbitrary number, then try it and verify. – Sparky Sep 22 '15 at 16:30
13

It's a css hack for IE9 & below version

write like this:

width: 500px\9;

Read this article http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 4
    Thanks for the link, but the article does not explain WHAT it does. – well actually Nov 04 '11 at 04:12
  • 1
    We use hack for IE for two things. 1) there are some properties which is not supported by IE like display:inline-block & 2) Every browser render some HTML & css properties differently. check this article http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ – sandeep Nov 04 '11 at 04:16
  • Check link also http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/ – sandeep Nov 04 '11 at 04:19
  • IE does support display: inline-block;, bad example. – reisio Nov 04 '11 at 05:21
  • Doesn't seem to be a particularly useful hack for the 'width' property, however. At least not outside of quirks mode. – reisio Nov 04 '11 at 05:23
  • @reisio; read my comment carefully is also said display: inline-block is not support by IE. – sandeep Nov 04 '11 at 05:27
  • display: inline-block; /IS/ supported by IE. – reisio Nov 04 '11 at 22:23
  • @reisio, depending on version it is only partially supported. IE 7 and below cannot apply `inline-block` to "block-level" elements. – eyelidlessness Mar 10 '12 at 00:19
  • @eyelidlessness: glad you agree. – reisio Mar 17 '12 at 17:31
2

In IE9 to set the width property you just add this hack.

e.g

.align {
    float:left;
    margin:5px;
    background-color:blue;
    width:65px;
    width:\9 !important;
}
Xavi López
  • 27,550
  • 11
  • 97
  • 161
Asad Shah
  • 21
  • 3
1

CSS Hack for IE9

/* Hack CSS IE9 */
.csshackie9 {color:#f00\9\0\;}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
gordi
  • 59
  • 1
  • 1
  • 7
    you should post more information aboiut what is this hack about instead of linking outside - if that blog is gone, then value of your answer would decrease. Additionally, not everyone speaks russian. – Marcin Orlowski Dec 05 '12 at 11:22
  • 1
    It would be better to provide some essential info in English, because link you have posted is to russian blog. – Artemix Dec 05 '12 at 11:24
  • OP, you should tell yourself off and go and sit on the naughty step. – slugmandrew Apr 15 '19 at 12:57