How to use CSS hack to handle each browser compatible IE6,IE7,IE8,IE9/FF

First: What's the browser compatibility

Browser compatibility issues are also referred to as Web compatibility or web compatibility issues, meaning that Web pages may appear inconsistent across browsers, resulting in compatibility issues between browsers and Web pages. In the design and production of the website, do a good job of browser compatibility, to allow the site under different browsers are normal display. For the development and design of the browser software, the better compatibility of the browser with the standard can give the user a better experience. This is a lot to understand.

Second: What is the reason for browser incompatibility

Because different browsers use the kernel and the supported HTML and other Web language standards (each browser has its own HTML tag style definition), and the User client's environment (such as different resolution) caused by the display does not achieve the ideal effect. The most common problem is that the location of web elements is confusing and misplaced.

Second: what is CSS hack

CSS hack because of different browsers, such as IE6,IE7,FF, and so on, the parsing of CSS is not the same, so the resulting page effect is not the same, get the page effect we need. At this time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect.

Third: What is the principle of CSS hack?

Because different browsers support the CSS and parse the result is not the same, but also due to the precedence of the CSS in the relationship. We can write different CSS for different browsers according to this.

There are roughly 3 forms of CSS Hack, CSS class internal Hack, selector Hack and HTML header reference (if IE) hack,css Hack mainly for IE browser.

Class internal hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two do not know.

Selector hack: For example, IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}.

HTML header Reference (if IE) Hack: For all ie:<!--[if ie]><!--your code--><! [Endif]-->, for IE6 and the following versions:<!--[if LT IE 7]><!--Your code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.

The writing order is usually written in front of the CSS of the browser with strong recognition ability. Here's how to write it in more detail.

Now everyone on the browser compatibility some of the theories have some understanding, the following focus on the CSS hack notation

All browsers universal height:100px;

IE Special height:100px\9;

IE6 Special _height:100px;

IE6IE7 Special *height:100px;

IE7 Special *+height:100px;

IE8 Special height:100\0;

IE7, IE8, FF shared height:100px!important;

Because CSS style has priority, in the writing CSS hack time also to pay attention to order, see the following example

One, such as to distinguish between IE6 and Firefox two browser, you can write:

Background:green; /* for Firefox */

*background:red; /* For IE6 */(both IE6 && IE7)

I see in the IE6 is red, in Firefox see is green.

Explain:

The above CSS in Firefox, it is not aware of the back of the thing with the asterisk is what, so it filtered out, ignored, the result of the analysis is: Div{background:green}, so naturally this div background is green.

In IE6, it can be identified by the two background, which results in the following: div{background:green;background:red;}, so according to the priority level, in the back of the red priority is high, So of course the background color of this div is red.

Second, CSS hack: How to distinguish between Ie6,ie7,firefox?

Below I will explain the level of the usage between the 22 in the said three together CSS hack how to write

① difference between IE6 and FF

Background:red;/*ff aiin.sinaapp.com*/

*background:blue;/*ie6 aiin.sinaapp.com*/

② the difference between IE6 and IE7 (because * for IE6 and IE7 are supported then the question of order should be considered)

*background:blue;/*ie6 and ie7*/

_background:yellow;/*ie6 aiin.sinaapp.com*/

IE7 background is blue, because the IE6 background is blue and finally yellow, the CSS style is the final standard, so the IE6 background is yellow.

③ difference IE7 with FF (method and ① same)

④ Difference Ff,ie7,ie6 Three

background:red;/*ff*/

*background:blue;/*ie7*/

_background:yellow;/*ie6*/

Well, now everyone should be able to understand the usage of the three!

Remind: IE can recognize *; standard browsers (such as FF) do not recognize *;ie6 * and in some cases do not recognize!important

Browser priority: Ff<ie7<ie6,css Hack The writing order is generally FF IE7 IE6

How to use CSS hack to handle each browser compatible IE6,IE7,IE8,IE9/FF