CSS Hack Analysis on browser compatibility

I. Basic Concepts

　　CSS hack:Write different CSS codes for different browsers.

　　Css hack principle: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.

　　Browser priority:FF <IE7 <IE6

The writing order is generally to write the CSS of a highly recognizable browser behind it, and the CSS hack writing order is generally FF IE7 IE6.

The div + css browser is compatible with IE6, IE7, and FFDifferences:

	IE6	IE7	FF
*	√	√	×
Important	×	√	√

1. IE can recognize *; standard browsers (such as FF) cannot recognize *;

2. IE6 can recognize *, but cannot recognize it! Important,

3. IE7 can recognize * and can also recognize! Important;

4. firefox cannot recognize *, but it can recognize it! Important;

1. Differences between IE6 and firefox:

Background: orange; * background: blue;

The background color of Firefox is orange, while that of IE is blue.

2. Differences between IE6 and IE7:

Background: green! Important; background: blue;

The background color of IE7 is green, and the background color of IE6 is blue.

3. Differences between IE7 and FF:

Background: orange; * background: green;

The background color of Firefox is orange, while that of IE7 is green.

4. FF, IE7, and IE6:

Background: orange;

* Background: green! Important;

* Background: blue;

The background color of Firefox is orange, that of IE7 is green, and that of IE6 is blue.

Ii. Practical suggestions

(1) Development Platform Selection

Write CSS on Firefox and be compatible with other browsers. it is certainly easier to do this than to make other browsers compatible with IE, because IE still has good support for old standards, but some of the unique features of IE are not supported by others. therefore, we recommend using Firefox with Firebug extension as a platform.

(2). CSS Hack Sequence

Using Firefox as a platform, as long as the code is well written, there will not be many places where Hack is required, and almost no problem exists in browsers other than IE, so you can temporarily ignore it,

　　The order is as follows:Firefox> IE6> IE7> others

(3). Hack Method

There are two methods: Processing in different files and processing in the same file. In fact, the functions are the same, but the starting points are different.

　　1. Processing in the same file.

For example, the control of id = "bgcolor" should show blue in IE6, green in IE7, and red in Firefox and other browsers.

IE6 does not recognize it! Important, do not recognize * + html. Therefore, IE6 can only be blue.

IE7 recognition! Important, also recognizes * + html, priority: (* + html +! Important)>! Important> + html. IE7 can be red, blue, and green, but green has the highest priority.

Firefox and other browsers recognize it! Important .! Important is preferred. Firefox can be red or blue, but red is preferred.

The above priority symbols are all allowed by the CSS3 standard, and other browsers also have other Hack methods, but so far I have not encountered Firefox normal, and other browsers other than IE are abnormal, so there is no sharing. as long as the code is standardized, we believe this situation should be rare (except JavaScript ).

　　2. process different files.

Why can the same file be processed and written in multiple files for different browsers? This is to fool W3C verification tool. In fact, only two files are required. One is for all browsers and the other is for IE only. write All W3C-compliant code to one file, and some code (such as cursor: hand;) that is required by IE and cannot be verified by W3C is put into another file, use the following method to import data.

The front-end compatibility of web pages should not be limited to support previous browsers (Forward compatibility), but also browser services (backward compatibility ). because browsers develop rapidly, and frequent Internet users update software frequently, backward compatibility is even more important than previous compatibility. how can we achieve backward compatibility? As long as your website meets the standards, it will never be out of date (except for the IE series). Therefore, we should do our best to achieve the standards and have to deal with Hack, and try to use a simple solution.