Write different CSS code for different browsers

First build the station to take you know what is the CSS hack:

CSS hack due to different browsers, such as Internet Explorer 6,internet Explorer 7,mozilla Firefox and so on, the interpretation of the CSS is not the same, so will result in the resulting page effect is not the same, Can't get the page effect we need. This time we need to different browsers to write different CSS, so that it can be compatible with different browsers, in different browsers can also get the page effect we want. The process of writing different CSS code for different browsers is called CSS hack!

Let's look at the difference between different browsers:

IE6 older version of the browser, more users,
IE7 newer browsers, closer to standard browsers,
IE8 is a Microsoft standard browser, but different from the browser,
Firefox (Mozilla, Firefox) and Google browser (Chrome) is a relatively standard IE browser, we generally use this browser as a reference platform for development, while IE8 and the two browsers to explain the proximity of CSS, generally as long as through Firefox, Google browser test compatibility, It is generally possible to determine IE8.

So generally we distinguish these browser CSS hack method becomes simple, we only need to consider Ie6ie7 Firefox (Firefox) These 3 browsers can be compatible with all browsers.
The specific differences are as follows:
Difference IE6 with FF:
Background:orange;*background:blue;
Distinction between IE6 and IE7:
Background:green!important;background:blue;
Difference IE7 with 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 cannot recognize!important,
IE7 can identify the *, also can identify!important;
FF does not recognize *, but can recognize!important; The following are CSS hack tables for each browser

Add another, underline "_" in addition,
IE6 supports underscores, IE7 and Firefox do not support underscores.

So we can distinguish ie6,ie7,firefox:background:orange;*background:green;_background:blue;

Note: No matter what method, the order of writing is Firefox written in the front, IE7 written in the middle, IE6 written in the last.

The above is to introduce different browser CSS hack, below we briefly introduce these CSS hack usage:

Requirement Description: If we set a class CSS property named Exple, CSS style border is 1PX black border, height is 100PX and request, under IE6 browser width is 150PX 100px;ie7 browser width, Firefox IE8 Google browser width is 200PX; (px is length per pixel)

The CSS code is as follows:
. exple{border:1px solid #000 height:100px;width:200px; *width:150px!important; *width100px;
So as long as the HTML set a div class (class= "Exple"), so this part of the Firefox, IE8, Google Browser will display a width of 200px height 100px with 1px black border box IE7 Browser width is 150PX height 100px with 1px black border box, in IE6 browser will display the length and width of 100px with 1px black Square.

Browser priority: Ff<ie7<ie6,css hack Writing order is typically FF IE7 IE6

To: "#demo {width:100px;}" As an example;

#demo {width:100px}/* is FIREFOX,IE6,IE7 executed. * *

* HTML #demo {width:120px}/* will be executed by IE6, the previous definition will be overwritten later, so #demo width in IE6 is 120px; */

*+html #demo {width:130px}/* will be executed by IE7 * *

---------------

So finally, #demo的宽度在三个浏览器的解释为:

firefox:100px;

ie6:120px;

ie7:130px;

IE8 Latest CSS hack:

"9" Example: "Border:1px 9;". Here "9" can distinguish all IE and Firefox.

"*" IE6, IE7 can be identified. IE8, Firefox can't.

"_" IE6 can Identify "_", IE7, IE8, Firefox can not.