CSS compatibility of IE7 beta2

When IE7 beta1 was launched, I tested it for the first time. At that time, I was disappointed to find that its support for CSS had almost no changes. Ms recently launched IE7 beta2, which has made many new improvements and changes. However, these improvements and changes may lead to some layout errors on the original normal web pages or the previously usable hack skills are no longer available. At the beginning of the year, msdn listed the possible problems for developers (this is the original article). Here I will briefly describe the main problems and hope to help you.

Note: before the release of IE7, all the content mentioned below may change.

The box model has changed !!!

I am afraid this will make developers who use web standards to build large websites feel the back-to-back changes, but don't worry too much. The main change is that the box model overflows (overflow) content processing method.

Assume that there is a box with a width of PX and a height of PX. At present, the main method of IE is to automatically increase the box to PX. IE7 beta2 adopts the same processing method as FF: the box remains unchanged, and the overflow part is rendered outside the box. That is to say, the overflow value of the box actually uses the W3C default value "visible ".

If your existing layout is dependent on IE's "automatic support", be careful and you may encounter problems (especially dynamic content web pages ).

The XML Prolog may affect the box model.

Oh, my God! Another box model!

As you know, ie has two rendering modes: quirks mode and strict mode. Quirks mode is basically non-standard, including the box model. Its rendering method differs from W3C standard. The strick mode is basically a standard (neither an absolute standard nor an absolute non-standard ......). In IE6 and earlier versions, the rendering mode will be selected based on the doctype declaration written in the first line (or only the first line) of the XHTML document. If you find a doctype that you can recognize, such as XHTML transitional or XHTML strict, it uses strict mode for rendering. Quirks mode is used in all other cases.

Some developers explicitly declare that their XHTML document is an XML document and will be in the first line of the document (the problem is here, it must also be in the first line) add the preface of XML (Prolog ). For example:

 
<? XML version = "1.0" encoding = "gb2312"?>
 

Although the original intention is to make the document more "standard", because IE does not recognize this line of words, the results are still rendered in quirks mode.

IE7 beta2 solves this problem. It will skip the PROLOG and check doctype. Therefore, IE6 and earlier versions may use quirks mode for rendering, while IE7 beta2 uses strict mode for rendering.

In fact, this problem is easy to solve. In the current environment, you can simply delete the Prolog, which is of no great use. Of course, if you want to pretend to be using XHTML, in fact, people who want to use quirks mode may have to think about a new method. ^_^

Hack tips ineffective due to bug improvement * html

This is an hack that uses the IE bug. The following statement only uses IE to parse the content:

 
* HTML {...}
 

 
* Html body {...}
 

Now IE beta2 will ignore them with the big army.

Underline hack

This is also an hack that uses the IE bug. The following statement only uses IE to parse the content:

 
. Myclass {
Min-Height: 300px;
_ Height: 300px;
}
 

At present, ie beta2 does not parse the attribute starting with an underscore, but treats it as a "user-defined" attribute. Custom Attributes cannot be applied to performance, but they are stored in the document model and can be accessed using scripts. (I have not tested this feature yet)

/**/Comment on hack

This is one of my favorite hack skills. The following statement is used in strict mode to make IE6 transparent (ie5.x will be parsed), but IE7 beta2 will parse it now:

 
. Myclass {
Height/**/: 300px;
}
 

Hack techniques ineffective due to enhancements

In the past, ie did not support the following statement, but now we can:

Child selector hack

 
HTML> body {
Height: 300px;
}
 

Adjacent selector hack

 
Head + body {
Height: 300px;
}
 

Adjacent selector and first-Child pseudo-class selector

 
Head: First-Child + body {
Height: 300px;
}
 

These are not bad messages. I never use these hack logs. ^

What should I do if my page is messy?

In the msdn articleArticleSome solutions are provided. From my point of view, they are all solutions for temporary and temporary problems. Do not use Js for CSS work, or load specific CSS only for IE. So we suggest you: Wait! The official version of IE7 may change everything before the official version is released. Second-class great CSSCommunityFind out more hack skills. IE7 cannot be exactly the same as ff, nor is it exactly the same as IE6. It will always be a bit different, just use the different things for hack.

Although using various hack is helpless, the reality is that we are trying to adapt to this industry while trying to influence it, in private, we hope to see the hack named after the Chinese people.

Fight!