Personal CSS Hacks for IE6, IE7, IE8, IE9, IE10

Personal CSS Hacks for IE6, IE7, IE8, IE9, IE10

Are CSS hacks an evil? Yes, of course.

But we will use them, while browsers like IE6, IE7 and IE8 will exist and while Microsoft will not create a normal browser, which will stand on equal with modern browsers like FireFox, Safari, Chrome and Opera.

We, web developers, are constantly faced with deficiencies of Internet Explorer, and CSS hacks allow to overcome them in most cases.

In this post I would like to group the personal CSS hacks for each of the 5 popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 and IE9 probably not. Therefore the focus of this article is on a personal CSS hack for Internet Explorer 8 and Internet Explorer 9.

CSS hack for Internet Explorer 6

It is called the Star HTML Hack and looks as follows:

* html .color {color: #F00;}

This hack uses fully valid CSS.

CSS hack for Internet Explorer 7

It is called the Star Plus Hack.

*:first-child+html .color {color: #F00;}

Or a shorter version:

*+html .color {color: #F00;}

Like the star HTML hack, this uses valid CSS.

CSS hack for Internet Explorer 8

@media \0screen {
	.color {color: #F00;}

This hacks does not use valid CSS.

CSS hack for Internet Explorer 9

:root .color {color: #F00\9;}

This hacks also does not use valid CSS.

Added 2013.02.04: Unfortunately IE10 understands this hack.

CSS hack for Internet Explorer 10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.color {color: #F00;}

This hacks also does not use valid CSS.


I’ve created a simple demo. Take a look.

Cоmmеnts (102):
  1. 1

    :last-child selector doesn’t seem to work in IE8. Does any one have a solution to this? Coz I tried all the hacks mentioned in the comments but none gave me a solution

  2. 5

    Im desperate for IE9 hack if its my only option. The web page is provided (viewed in IE9) is one of dozens of examples of IE9 nightmares (boxes squared off, open under footer text, footer ends up thousands of pixels below main content and on and on).

    IE9 only… Chrome, Firefox, Opera… all good.

    What hack do you suggest? Where do you suggest I place it? I have child theme. Child style.css?

    Sorry for rambling… but ONLY post I could find even broaching the subject. Need to go live with site soon… and Im really sweating it!

  3. 6
    Naveed A said:

    Nice tricks.

  4. 7

    my css is not working with the IE8 than plz tell me about the IE8 css……

  5. 8

    Thanks for this!

    I.E 7 is a bitch!


  6. 9

    If you really want to make work for all browsers you need go to google and type like this.
    css hack for opera browser and you will get different methods how to fix it.

    These codes aren’t working anymore just only like this i have
    Only one works for ie 9
    Here is the example: for ie9 – margin-top:\9;
    for other different methods like these.

    The best i found on net and it works for all borwsers.

  7. 10

    Congratulations! Very thanks.
    I search in other sites and nothing.
    Thanks, my problem with IE8 done! :D

  8. 11
    Gunjan Solanki said:

    My lots of Problem done with this tric !!!

    Thanks you very much.


  9. 12

    Worked like a charm for IE7 and IE8. Many thanks for this :)

  10. 13
    Robert Heuser said:

    Finally, a solution to my problem.

    I was trying to get a website to work in IE7, IE8, IE9, and IE9 compatability mode.

    Your hack for IE8 was what I needed.


  11. 14
    Matheus Labanca said:

    Thanks! You saved my day

  12. 15
    Raghibsuleman said:

    Thanks for IE8 Css Hacks….

  13. 16

    Thank you so much for the css Hacks… really awesome ;)

  14. 17
    daud serar said:

    internet explorer is better for fire

  15. 18

    Thanks for IE8 Css Hacks….

Соmmеnt раgеs: « 1 2 3
Lеаvе а Соmmеnt

© 2009–2022  •  Privacy Policy