Home > Article > Web Front-end > How can I target IE7 and IE8 with valid CSS without using hacks?

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

Barbara StreisandOriginal: 2024-10-30 09:04:02346browse

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 -->

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:

<html lang="en" class="ie10"> <!-- 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!

css html for while using class Conditional this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Make a Div Expand from Its Center Using CSS?Next article：How to Make a Div Expand from Its Center Using CSS?

See more

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

Related articles