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

This article mainly introduces the example analysis of compatibility CSS HACK code, which is very detailed and has certain reference value. Friends who are interested must finish it!

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

# CSS5 {

Background:blue; / * non-IE background shading * /

Background:red\ 9; / * IE6, IE7, IE8 backing color * /

}

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

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

[example]:

# CSS5 {

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

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

* background:black; / * IE7 scenery changing color * /

_ background:orange; / * IE6 background changes to orange * /

}

[clarification]: because IE series readers can read "\ 9", while IE6 and IE7 can read "*" (meter font), and IE6 can recognize "_" (bottom line), it may follow the order to write it down, so it will allow readers to correctly read and understand CSS syntax, so it is generally and effective to distinguish between IE versions and non-IE readers (such as Firefox, Opera, Google Chrome, Safari, etc.).

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

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

[example]:

# CSS5 {

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

* background:black; / * IE7 backup turns black * /

_ background:orange; / * IE6 backing turns orange * /

}

[note]: IE7 and IE6 can read "*" (meter font), IE6 can read "_" (bottom line), but IE7 cannot read "_", while Firefox (non-IE dabbler) is purely unable to identify "*" and "_", so it can distinguish IE6, IE7 and Firefox by how consistent it is.

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

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

[example]:

# CSS5 {

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

* background:green! important; / * IE7 background turns green * /

* background:orange; / * IE6 background turns orange * /

}

[description]: IE7 generally recognizes "*" and "! important", but IE6 can only identify "*", but cannot identify "! important". As for Firefox, it may read "! important" but cannot recognize "*" so it may be useful to distinguish IE6, IE7 and Firefox through such differences.

5. Distinguish between IE7 and Firefox

[distinctive identification mark]: "*", "! important"

[example]:

# CSS5 {

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

* background:green! important; / * IE7 turns green in the background * /

}

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

6. Distinguish between IE6 and IE7 (EXP 1)

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

[example]:

# tip {

* background:black; / * IE7 settings turn black * /

_ background:orange; / * IE6 turns orange on the mountain * /

}

[note]: both IE7 and IE6 may recognize "*" (meter font), but IE6 or "_" (bottom line) can not be recognized by IE7. The difference between IE6 and IE7 can be easily distinguished by the inability to read "_" through IE7.

7. Distinguish between IE6 and IE7 (EXP 2)

[distinguishing symbol]: "! important"

[example]:

# CSS5 {

Background:black! important; / * IE7 background becomes black * /

Background:orange; / * IE6 background changes to orange * /

}

[description]: because IE7 can read "! important;" but not IE6, and the reading model of CSS is from top to bottom, because IE6 cannot recognize "! important", it directly jumps to the next line to read CSS, so the cloth will appear orange.

8. Distinguish between IE6 and Firefox

[distinguishing symbol]: "_"

[example]:

# CSS5 {

Background:black; / * Firefox sets turn black * /

_ background:orange; / * IE6 set changes to orange * /

}

[clarification]: because IE6 probably recognizes "_" (bottom line), but Firefox is not, so it may be through what disagreement to distinguish Firefox from IE6, and effectively achieve CSS hack.

The above is all the content of the article "sample Analysis of compatibility CSS HACK Code". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to 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.