CSS Hacks for IE targeting only IE8, IE7 and IE6

Did you know that there are specific CSS hacks for IE that allow you to target IE8, IE7 and IE6?

During one of our latest projects we came across some specific CSS issues with our client website rendering on IE6 and IE8.

Yes, Internet Explorer is the bane of a web developers life but the browsers prevalence demands we just get on and deal with it.

CSS Hack Targeting IE8 and Below

To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply.  e.g.

CSS Hack Targeting IE7 and Below

To target Internet Explorer 7 and below in CSS, prepend an asterisk “*” to the start of the style you want to apply.  e.g.

CSS Hack Targeting IE6 and Below

To target Internet Explorer 7 and below in CSS, prepend an underscore “_” to the start of the style you want to apply.  e.g.

A Warning on Hacking Your CSS

Hacking your CSS may seem a quick fix for getting your styles to work across browser types, however, you should really be using conditional statements from within your HTML. e.g.

Conditional statements in HTML have cross-browser support, however, CSS hacks such as prepending an underscore are not.

This means that Apple, for example, could add CSS support for a prepended underscore in the next release of Safari and suddenly your hacks also affect that browser.

[Editor: Looking for how to hack CSS for IE10 or IE11?]

Happy hacking!

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the orgnising committee for WordCamp Sydney since 2014. He speaks at many technical events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.

8 thoughts on “CSS Hacks for IE targeting only IE8, IE7 and IE6”

          1. use Ie8 CSS Hack

            Your width: 230px; and padding-left: 15px; you use to this width/**/:215px/**/;

          2. maybe another way:
            @media screen {
            .selector { property: value; }
            }

            this for all properties.

Comments are closed.