IE7.0RC1, CSS compatibility (ie6, ff browser) Solution

[This article is reproduced from: Bible's Blog]

First, I declare that when I published this article, IE7.0 and above currently have four versions: Ie7.0beta1, Ie7.0beta2, Ie7.0beta3, and Ie7.0 RC. These four versions are also compatible with CSS. In particular, beta1, beta2 and RC versions are quite different.

I did my own tests on IE7.0RC. It is found that IE7RC has solved many bugs in IE6. For example, if left float is used and margin-left is used, the value of this margin is doubled. Also solved IE6.0 does not recognize! Important priority. In addition, for example, margin and padding between two divs have been set to 0.

However, if the adjacent DIV uses a Text object, the text object will automatically generate a 3px gap. Many of these details are fixed in IE7RC.

Next we will continue to talk about how to make your page pass IE7RC testing. Before talking about this topic, let me complain: What is more painful than testing CSS on multiple different browsers? That is to test CSS in multiple different versions of different browsers!

Because there is the latest news Release IE7 in this month should also Release a RC (Release Candidate) version, (For details, refer to: IE7 team blog: http://blogs.msdn.com/ie ), before we know the latest version, IE 7.0.5700.6 Release Candidate (click to download) prevails.

Note! After IE7.0 is installed and restarted, you may not be able to access WINDOWS. If you use a cracked WINDOWS or a genuine WINDOWS Version (that is, you can update the WINDOWS System Online) you can install it with confidence.

After installation, it will directly overwrite IE6.0. That is to say, you cannot use the IE browser for the moment. Token)

The above describes how to install and solve the problem of running IE6 and IE7 on the local machine. The following describes the CSS compatibility solution for IE7.0RC:

The compatibility here is mainly compatible with IE6.0 and later versions, and compatible with Firefox1.5 and later versions. This is the mainstream. If you are interested in other browsers, we can communicate online or QQ.

To achieve compatibility, there are three major solutions: 1. Conditional annotations. 2. JS. 3. CSS hack. The 1st types must be valid in HTML, and the specific CSS should be prepared for a specific browser, so it is difficult to manage them. You must prepare more than two sets of CSS for the 2nd types. 3rd types are not recommended and not supported by W3C, but are currently used by most developers.

Now IE6, IE7, and FF have roughly the same interpretation of the box model, both of which are the actual box width = Box content width + inner patch value + Border width. The main difference lies in some details. For example, the margin of IE6.0 doubles the problem. In this way, when writing CSS or building XHTML structures, try to write compatible and scalable code and structure definitions to avoid bugs, avoid the occurrence of BUG conditions and prevent incompatibility of hidden risks.

Finally, it is very important to mention that CSS is almost omnipotent, and CSS hack is omnipotent. The proper combination of CSS rules and CSS hack can correct the misplacement of display details in different browsers. For example, we define the content width of the same box:

. Div {width: 150px! Important;> width: 200px! Important; width: 600px ;}

In this definition, the actual width of the box is 150px in FF, 200px in IE7.0RC, and 600px in IE6.0.

Why ??

Because FF knows you! Important; and follow its priority, but there is a> in front of the intermediate value, so FF ignores it, so that the final FF is 150px;

IE7.0RC also knows "! Important; ", and also know"> ", so the next"! Important; "overwrites the previous one. The last one prevails.

IE6.0 does not care "! Important; "only recognizes the last value.

With this in mind, I think the compatibility of the three main browsers is basically not too high.