CSS compatibility for IE7 Beta2 _css/html

When IE7 Beta1 launched, I tested it at the first time. It was a disappointment that there was little change in its support for CSS. MS has recently launched the IE7 Beta2, and this time there have been a lot of new improvements and changes. But these improvements and changes can lead to some of the original normal Web page layout errors or the original use of hack techniques are no longer available. MSDN listed these possible issues to the developer at the beginning of the year (this is the original), and I'm going to give you a brief description of the main issues, and hopefully it will help.

Note that all of the following references are subject to change before IE7 genuine release.

The box model changed!!!.

This is probably going to make it cool for developers using web standards to build large Web sites, but don't worry too much, the main change is the way the box model handles overflow (overflow) content.

Suppose you have a 100px-wide 100px-high box with a 200px-wide 200px-high picture in this box. At present, the Nyaya method of IE is to "brace" the box automatically to 200px square. The IE7 Beta2 is consistent with FF: the box is unchanged and the overflow part is rendered outside the box. In other words, the overflow value of the box really uses the default value of "visible" for the consortium.

If your existing layout is dependent on IE's "auto-open", be careful that there are likely to be problems (especially dynamic content pages).

XML Prolog (prolog) may affect the box model

Oh,my god! It's a box model again!

You know that IE has two modes of rendering: Quirks mode and strict mode. Quirks mode is basically non-standard, including a box model, and its rendering mode is somewhat different from the standard of the consortium. and Strick mode is basically standard (anyway is not absolute standard is not absolutely non-standard ...) ）。 IE6 and Previous versions Select the render mode based on the DOCTYPE declaration written in the first line of the XHTML document (and only the first line). If you find a DOCTYPE that it can identify, such as XHTML transitional or XHTML strict, it uses strict mode to render it. Quirks mode is used in all other cases.

Some developers explicitly declare that their XHTML document is an XML, in the first line of the document (the problem is here, it must also be in the first line) plus the preamble of the XML (Prolog). Like what:

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

Although the original intention is to make the document more "standard", but because IE does not recognize this line of words, the result is quirks mode to render.

IE7 Beta2 Solve this problem, it will skip the Prolog to check doctype. So it may appear that IE6 and the following versions are rendered with quirks mode and IE7 Beta2 with strict mode.

In fact, this problem is easy to solve, in the existing environment, the Prolog directly delete the line, it is no big use. Of course you want to pretend that you're using XHTML, and the fact that someone who wants to use quirks mode might have to think of a new way ^_^

Hack techniques that fail due to improved bugs

* HTML

This is a use of IE bug hack, such as the following writing only IE will parse the content:

* Html{...}

* HTML body{...}

Now IE Beta2 will ignore them together with the troop.

Underline hack

This is also a use of IE bug hack, such as the following writing only IE will parse the content:

. myclass{

min-height:300px;

_height:300px;

}

Now IE Beta2 will no longer resolve the attribute at the beginning of the underscore, but it will be treated as a "user-defined" attribute. Custom attributes are not applied to performance, but they exist in the document model and can be accessed using scripts. (I haven't tested this feature yet)

/**/annotation Hack

This is one of my favorite hack skills. The following notation is transparent to IE6 (ie5.x is parsed) under strict mode, but now IE7 Beta2 will parse it:

. myclass{

height/**/:300px;

}

Hack techniques that fail because of enhanced functionality

The original IE does not support the following wording, now can:

Child selector hack

HTML > body{

height:300px;

}

Adjacent selector hack

Head + body{

height:300px;

}

Adjacent selectors and First-child pseudo class selectors

Head:first-child + body{

height:300px;

}

None of this is bad news, I never use these hack ^_^

My page is disorderly, what to do?

In the MSDN article gives a number of solutions, from my point of view are the symptoms do not cure, nowhere near solution. Do not use JS to do the work of CSS, or only for IE to load a specific CSS. So we suggest: wait! The official version of IE7, anything can change before the official version comes out. Second, the great CSS community of cattle and cattle to find out more hack skills. IE7 impossible to do and FF exactly the same, and can not be exactly the same as IE6, anyway, there will always be a bit different, on the use of something different to do hack.

Although using a variety of hack is a very helpless thing, but the reality is that, we are trying to influence the industry at the same time only to adapt to it, so secretly very want to see the Chinese name of the hack appear.

fight!