Shulou(Shulou.com)06/01 Report--

This "IE6, IE7, IE8, Firefox compatibility CSS HACK problem case analysis" article most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "IE6, IE7, IE8, Firefox compatibility CSS HACK problem case analysis" article.

1. Distinguish between IE and non-IE dabbler CSS HACK codes

# CSS5 {

Bac kilogram round: blue; / * non-IE background color * /

Bac kg round:red\ 9; / * IE6, IE7, IE8 backup color * /

}

two。 Distinguishing IE6,IE7,IE8,FF CSS HACK

[distinguishing symbol]: "\ 9", "*", "_"

[example]:

# CSS5 {

Background:blue; / * Firefox hillside turns blue * /

Background:red\ 9; / * IE8 backing turns red * /

* bac kg round:black; / * IE7 background turns black * /

_ bac kilogram round: orange; / * IE6 background changes to orange * /

}

[description]: because IE series readers can read "\ 9", while IE6 and IE7 can read "*" (meter font), the rest of IE6 can recognize "_" (bottom line), so it probably follows the order to write it up, so it will let the browser read the CSS syntax correctly, so it can be useful to distinguish between IE versions and non-IE browsers (such as Firefox, Opera, Google Chrome, Safari, etc.).

3. Distinguish between IE6, IE7, Firefox (EXP 1)

[distinguishing symbol]: "*", "_"

[example]:

# CSS5 {

Bac kg round:blue; / * Firefox backing turns blue * /

* background:black; / * IE7 turns black in the background * /

_ bac kilogram round: orange; / * IE6 background turns orange * /

}

[note]: IE7 and IE6 can read "*" (meter font), IE6 may read "_" (bottom line), but IE7 cannot read "_", as for Firefox (non-IE browser), it is impossible to recognize "*" and "_", so it is possible to judge IE6, IE7 and Firefox through such divergence.

4. Distinguish between IE6, IE7, Firefox (EXP 2)

[distinguishing mark]: "*", "! important"

[example]:

# CSS5 {

Bac kg round:blue; / * Firefox set turns blue * /

* bac kilogram round: green! important; / * IE7 background turns green * /

* bac kg round:orange; / * IE6 background changes to orange * /

}

[clarification]: IE7 generally recognizes "*" and "! important", but IE6 can only identify "*", but cannot identify "! important". As for Firefox, it probably reads "! important" but cannot identify "*" so it is useful to distinguish between IE6, IE7 and Firefox.

5. Distinguish between IE7 and Firefox

[distinguishing mark]: "*", "! important"

[example]:

# CSS5 {

Bac kilogram round: blue; / * Firefox set turns blue * /

* bac kg round:green! important; / * IE7 turns green against the mountain * /

}

[explanation]: because Firefox may recognize "! important" but not "*", while IE7 can understand "*" and "! important" at the same time, or two identification marks to distinguish IE7 from Firefox.

6. Distinguish between IE6 and IE7 (EXP 1)

[differential identification mark]: "*", "_"

[example]:

# tip {

* bac kg round:black; / * IE7 background turns black * /

_ bac kilogram round: orange; / * IE6 set turns orange * /

}

[clarification]: both IE7 and IE6 can roughly identify "*" (meter font size), but IE6 can roughly identify "_" (bottom line), while IE7 is unable to identify "_". The difference between IE6 and IE7 can be easily distinguished by the fact that IE7 is unable to read "_".

7. Distinguish between IE6 and IE7 (EXP 2)

[distinguishing mark]: "! important"

[example]:

# CSS5 {

Background:black! important; / * IE7 turns black in the background * /

Bac kg round:orange; / * IE6 turns orange in the background * /

}

[note]: because IE7 can read "! important;" but IE6 is successful, and CSS is read from top to bottom, so IE6 can not recognize "! important" and directly jump to the next line to read CSS, so the scenery will appear orange.

8. Distinguish between IE6 and Firefox

[distinguishing mark]: "_"

[example]:

# CSS5 {

Background:black; / * Firefox turns black in the background * /

_ bac kg round:orange; / * IE6 backup turns orange * /

}

[description]: because IE6 may recognize "_" (bottom line), but Firefox is not, so or through such a gap to distinguish between Firefox and IE6, ineffective to kill CSS hack.

The above is about "IE6, IE7, IE8, Firefox compatibility CSS HACK example analysis" of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.