How can I target IE7 and IE8 with valid CSS without using hacks?

Targeting IE7 and IE8 with Valid CSS

Introduction:

Designing for older versions of Internet Explorer can be challenging due to inconsistencies in CSS support. This article explores methods to specifically target IE7 and IE8 while adhering to W3C standards.

Explicit Targeting without Hacks:

To explicitly target IE versions without resorting to CSS hacks, assign a browser-unique class to the element. The class can then be used for CSS selectors.

 <!-- IE7 -->

In CSS, use the class to style the targeted browser:

.ie7 body { 
    border: 1px solid blue; 
}

Targeting with CSS Hacks:

Alternatively, one can use CSS hacks to achieve browser-specific styling:

• "9": Targets IE8 and below
• "*": Targets IE7 and below
• "_": Targets IE6

Example:

body { 
    border: 1px solid red; /* standard */
    border: 1px solid blue; /* IE8 and below */
    *border: 1px solid orange; /* IE7 and below */
    _border: 1px solid blue; /* IE6 */
}

Targeting IE10:

To target IE10, which does not recognize conditional statements, use the following script:

<script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script>

Add it to the

section to assign an "ie10" class to the element:

 <!-- IE10 -->

The above is the detailed content of How can I target IE7 and IE8 with valid CSS without using hacks?. For more information, please follow other related articles on the PHP Chinese website!