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

How can I target IE7 and IE8 with valid CSS?

DDD

Release： 2024-10-29 00:43:30

Original

232 people have browsed it

How can I target IE7 and IE8 with valid CSS?

Targeting IE7 and IE8 with Valid CSS

Targeting specific IE versions with CSS can be challenging, as applying fixes for one version may not work for another. This guide outlines two methods for targeting IE7 and IE8 with valid CSS: using HTML and CSS without hacks, and using CSS "hacks."

Explicit Targeting without Hacks

To avoid using hacks, add a browser-unique class to the element and select based on browser later. For example:

<code class="html"><!doctype 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

Then, apply CSS targeting specifically to the desired browser versions:

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

Copy after login

Targeting with CSS Hacks

To target IE versions using hacks, use the following characters:

"9": Targets IE8 and below
"*": Targets IE7 and below
"_": Targets 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

IE10 does not recognize conditional statements, so add an "ie10" class to the element using:

<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 can I target IE7 and IE8 with valid CSS?. For more information, please follow other related articles on the PHP Chinese website!