Home >Web Front-end >CSS Tutorial >How to Specifically Target IE7 and IE8 with Compliant CSS?
How to Specifically Target IE7 and IE8 with Compliant CSS?
- Susan SarandonOriginal
- 2024-10-29 21:00:03687browse
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>
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>
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>
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>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!