How can I target IE7 and IE8 with valid CSS without using hacks?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-10-30 09:04:02

Original

458 people have browsed it

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.

<html lang="en" class="ie7"> <!-- IE7 -->

Copy after login

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

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

Copy after login

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 */
}

Copy after login

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>

Copy after login

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

<html lang="en" class="ie10"> <!-- IE10 -->

Copy after login

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!