How to Specifically Target IE7 and IE8 with Compliant CSS?-CSS Tutorial-php.cn

How to Specifically Target IE7 and IE8 with Compliant CSS?

Susan Sarandon

Release： 2024-10-29 21:00:03

Original

687 people have browsed it

How to Specifically Target IE7 and IE8 with Compliant CSS?

How to Specifically Target IE7 and IE8 with Compliant CSS

Achieving browser-specific CSS targeting can be challenging, especially when addressing older versions like IE7 and IE8. Here are two approaches:

Explicit Targeting Without Hacks Using HTML and CSS

This method relies on creating browser-specific classes for the element. For instance:

<code class="html"><!--[if IE]>
<![endif]-->
<!--[if lt IE 7 ]><html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--></code>

Copy after login

Within your CSS, you can then precisely target specific IE versions:

<code class="css">.ie6 body { border:1px solid red; }
.ie7 body { border:1px solid blue; }</code>

Copy after login

Targeting IE Versions with CSS "Hacks"

For CSS "hacks," the following rules apply:

Use "9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.

Example:

<code class="css">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 */
}</code>

Copy after login

Targeting IE10

For IE10, which does not recognize conditional statements, use the following code:

<code class="html"><!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
  <head></head>
  <body></body>
</html></code>

Copy after login

The above is the detailed content of How to Specifically Target IE7 and IE8 with Compliant CSS?. For more information, please follow other related articles on the PHP Chinese website!