HTML compatibility issues HACK technology-amateur obsessive-compulsive disorder patients

HTML compatibility-HACK technology-amateur obsessive-compulsive disorder patients Let's talk about it first:The purpose of this article is to describe the compatibility of IE8 and Firefox.

The process of writing different CSS for different browsers is called CSS hack, also called CSS hack. I believe you will be interested in compatibility issues that are not easy to solve.

Note:

Many documents on the Internet are often used! Important also serves as an hack segment, which is actually a misunderstanding .! Important is often used to change the style, not compatible with hack. The reason for this misunderstanding is that IE6 does not actively identify it in some cases! Important is often mistaken for identifying IE6 hack. However, in some cases, IE6 is not recognized (in ie6, the same bracket defines the same style attribute, and when important is added, the important mark is ignored, example: {background: red! Important; background: green;} ie6 is interpreted as background green, and other browsers are interpreted as background red. If the same style is defined in different brackets, when important is added, important works normally, for example, p {background: red! Important} p {background: green}. In this case, all browsers will interpret the background color as red)

Differences between css hack and IE6, IE7, IE8, and Firefox

1. Differences between IE and non-IE browsers

Example:

# Tip {background: blue;/* IE background */background: red \ 9;/* IE6, IE7, and IE8 background */}

2. Differences between IE6, IE7, IE8, and FF

Differences: "\ 9", "*", and 」,「*」,「_」

Example: # tip {background: blue;/* Firefox background turns blue */background: red \ 9;/* IE8 background turns red */* background: black; /* change the IE7 background to black */_ background: orange;/* change the IE6 background to orange */}

Note: because IE series browsers can read "\ 9", IE6 and IE7 can read "*" (font size), and IE6 can recognize "_" (bottom line), you can write it down in order, this will allow the browser to correctly read and understand the CSS syntax, so it can effectively distinguish IE versions and IE browsers (such as Firefox, Opera, GoogleChrome, Safari, etc ).

3. Differences between IE6, IE7, and Firefox

Differences: "*" and :「*」,「_」

Example:

# Tip {background: blue;/* Firefox background turns blue */* background: black;/* IE7 background changes */_ background: orange;/* IE6 background changes to orange */}

Note: IE7 and IE6 can read "*" (font size). IE6 can read "_" (bottom line), but IE7 can read "_" on Firefox (IE browser) this completely identifies "*" and "_", so you can distinguish IE6, IE7, and Firefox by using this difference.

4. Differences between IE7 and Firefox

Symbol :「*」,「! Important 」

Example:

# Tip {background: blue;/* Firefox background turns blue */* background: green! Important;/* The IE7 background turns green */}

Note: Firefox can recognize 「! Important can recognize "*", while IE7 can understand "*" and "!" at the same time 「*」,「! Important, so you can separate IE7 and Firefox with two identifiers.

5. Differences between IE6 and IE7 (method 1)

Differences: "*" and :「*」,「_」

Example:

# Tip {* background: black;/* IE7 background change */_ background: orange;/* IE6 background change to orange */}

Note: Both IE7 and IE6 can recognize "*", but IE6 can recognize "_" (bottom line), while IE7 can recognize, by reading "_" Through IE7, you can easily distinguish the difference between IE6 and IE7.

6. Differences between IE6 and IE7 (method 2)

Symbol :「! Important 」

Example:

# Tip {background: black! Important;/* IE7 background change */background: orange;/* IE6 background change orange */}

Note: IE7 can read 「! Important; "but IE6 does not. The CSS reading steps are from top to bottom. Therefore, IE6 can be recognized by the method when reading 「! Important directly jumps down to read CSS, so the background will show orange.

7. Differences between IE6 and Firefox

Difference Symbol: "_" [Example ]:

# Tip {background: black;/* Firefox background change */_ background: orange;/* IE6 background change orange */}

Note: IE6 can recognize "_" (bottom line), but Firefox does not. Therefore, Firefox and IE6 can be separated by such differences to effectively form CSShack.

Summary:

We hope these HACK technical summaries can help developers who need help. I also hope that you will not be entangled in the compatibility issues of the IE series!