What is CSS hack and its writing method.

What is CSS hack?

Http://www.div-css.com what is CSS hack

Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need.

At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.

This process of writing different CSS codes for different browsers is called CSS hack, also called CSS hack.

What is the principle of CSS hack?

Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.

For example, IE6 can recognize underline _ and star number *, and IE7 can recognize asterisks *. When underline _ cannot be recognized, neither Firefox can recognize it. And so on.

The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following describes how to write more details.

How to Write CSS hack

For example, to distinguish IE6 from Firefox, you can write as follows:

1. <Style>
2. Div {
3. Background: green;/* For Firefox */
4. * Background: red;/* For IE6 */
5. }
6. </Style>
7. <Div> I saw red in IE6 and green in Firefox. </Div>

<Style> Div {Background: green;/* For Firefox */* Background: red; /* For IE6 */} </style> <div> I saw red in IE6 and green in Firefox. </Div>

Explanations:
In Firefox, the above CSS does not recognize the stuff with an asterisk *, so it is filtered out and ignored. The parsed result is: div {Background: Green}, so the background of this div is green.
In IE6, both background can be identified. The parsed result is: div {Background: green; Background: red;}, so according to the priority level, the red at the end has a high priority, so of course the background color of this div is red.

 

CSS hack: distinguishes IE6, IE7, and Firefox from different browsers. CSS hack Syntax:

Difference between IE6 and FF: Background: orange; * Background: blue;

Difference between IE6 and IE7: Background: Green! Important; Background: blue;

Difference between IE7 and FF: Background: orange; * Background: green;

Difference ff, IE7, IE6: Background: orange; * Background: Green! Important; * Background: blue;

Note: IE can recognize *; standard browsers (such as ff) cannot recognize *; IE6 can recognize *, but not! Important and IE7 can recognize * and also! Important; FF cannot recognize *, but can recognize it! Important;

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√

Add another underscore "_",
IE6 supports underlines, while IE7 and Firefox do not.

So you can also distinguish IE6, IE7, and Firefox.
: Background: orange; * Background: green; _ Background: blue;

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.

Appendix: Table of compatibility with various CSS browsers