IE7 Beta2 's CSS compatibility _css/html

When IE7 Beta1 was launched, I tested it in the first time. It was a disappointment that the support for CSS was almost unchanged. MS has recently launched the IE7 Beta2, this time with a lot of new improvements and changes. However, these improvements and changes will cause some original normal page layout errors or the original hack skills can no longer be used. MSDN at the beginning of the year at the time to list these possible problems to the developer (this is the original), here I have the main problem of a simple description, I hope to be helpful to everyone.

Note that all content mentioned below is subject to change before IE7 is released.

Box model changed!!!

This is likely to be a change in the spine for developers who use 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 in this box. At present, the Nyaya method of IE is automatic box "brace big" to 200px Square. The IE7 Beta2 approach is consistent with FF: the box is constant 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".

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

The XML Preamble (prolog) may affect the box model

Oh,my god! Another box model!

You know that IE has two modes of rendering: Quirks mode and strict mode. Quirks mode is basically non-standard, including the box model, and its rendering style and the standard of a few. and Strick mode is basically standard (it's not absolutely standard or not absolutely standard ...). ）。 IE6 and Previous versions select the rendering mode based on the DOCTYPE declaration that is written in the first line of the XHTML document (and can only be the first line). If you find a doctype that it can recognize, such as XHTML transitional or XHTML strict, etc., it is rendered using strict mode. Quirks mode is used in all other cases.

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

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

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

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

Hack tips for failure due to bug fixes

* HTML

This is a use of IE bug hack, such as the following wording 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 wording only IE will parse the content:

. myclass{
   min-height:300px;
   _height:300px;
}

Now IE Beta2 will no longer parse the attributes that begin with an underscore, but will treat it as a "user-defined" property. Custom attributes do not apply to performance, but they exist in the document model and can be accessed using scripts. (I haven't tested this feature yet.)

/**/comment hack

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

. myclass{
   height/**/:300px;
}

Hack techniques that fail due to enhanced functionality

The original IE does not support the following wording, now you 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;
}

These are not bad news, I never use these hack ^_^

My page is a mess, what should I do?

In the MSDN article that gives some solutions, from my point of view are some of the symptoms of the solution, ineffective. Do not use JS to do the work of CSS, or only for IE to load specific CSS. So suggest everyone: wait! First-class IE7 of the official version, before the official version comes out, anything is likely to change. Two of the great CSS community cattle bulls find more hack tricks. IE7 can not do and FF exactly the same, and can not be the same as IE6, anyway, there will always be a little different, the use of something different to do hack.

Although the use of various 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 much hope to see the Chinese name named after the emergence of hack.

fight!

