Cascading style sheet compatibility in Internet Explorer 7

Style sheet Brief Introduction
Internet Explorer 7 contains a number of improvements on cascading style sheet (CSS) parsing and rendering. These improvements are meant to improve Internet Explorer's ability to interpret cascading style sheets to meet recommended standards for the consortium, while providing developers with a collection of features to rely on.

In some cases, these changes may have an impact when existing content is rendered in a way that is incompatible with IE6. This behavior is common when moving elements to different areas of paper or overlapping content in IE7. These problems are often caused by the use of special CSS content (such as common "hacks" or filters) in order to resolve small errors that occur in the IE6 strict mode. In this article we will discuss why CSS upgrades can cause pages to be corrupted and the best way to solve problems that cause these results.

Seriously consider compatibility

In the Internet Explorer team, we believe that compatibility is an important part of the rollout of a platform that developers can build excellent solutions for. We need to continue to show what already exists in the new release, while adding and improving new features. To achieve this seemingly contradictory objective, we refer to quirks and strict mode. Support for the strict mode is introduced in IE6, which is determined by a declaration at the beginning of the HTML page. In quirks mode, we can ensure compatibility, so existing content can be rendered as it was in previous IE versions. In the strict model, our job is to improve consistency in the direction recommended by the consortium, and in this process it includes changes that could affect existing content.

Many of the issues associated with CSS parsing and display in the Internet Explorer6 have good documentation on many sites, such as www.quirksmode.org and www.positioniseverything.net.

In the case of using CSS in IE, we believe that fixing the problem that appears in the IE6 strict pattern is the right choice, even if it causes some change in the page rendering.

Issues page for IE7
If a page is rendered differently than previous versions of IE in an Internet Explorer7, the first step is to diagnose the cause of the error so that we can quickly find an effective solution.

User Agent strings and browser detection
Before we look at the impact of CSS in IE7, we should first rule out a common compatibility problem. Some sites provide different content based on the type and version of the browsers used to access them, and these sites are not known to be IE7 accessed. This problem occurs when the user Agent string is detected, and more details can be found in detecting Internet Explorer more effectively.

XML prolog problem affecting CSS Box model
The XML prolog describes the XML version being used, which is often used when combined with XHTML. As explained above, we have introduced a switch in IE6 to switch between the quirks mode and the strict mode. This switch must be placed on the first line of the page. Unfortunately, the XML Prolog also needs this location, and most authors who use XML Prolog will put it in front of the strict mode switch. This causes IE6 to ignore the author's intent and IE6 to render the page in quirks mode, rather than the strict pattern. We fixed the problem in the IE7. The XML prolog can now be followed by the strict mode switch to properly display the XHTML page. However, some pages in the rendering of their content, the default is that IE is not in strict mode (even if IE should conform to HTML spec). The rendering problem caused by XML Prolog is easy to discriminate: Open the View source file for the page and find the first two lines. If you see an XML prolog and a qualification, and there is a problem with page rendering, most of the time the author needs to update the page content.

the change of Box model
In IE7, in order to adapt to the CSS2.1 box model, we modified the overflow behavior. Overflow is a method that describes whether the content of a block element is omitted when it overflows its area. The default is visible. This value (visible) indicates that the content is not omitted, that is, it may be rendered outside the region. Previous IE did not support this behavior. Content always needs to fit the size of the area. Imagine a width and height of 100px area, if the content is less than 100px, then there is no problem. If the content exceeds the size, we need to automatically grow the area size to fit the content. To demonstrate this behavior, consider the following code example.

some text long enough to make it interesting.

-anonymous

The following picture illustrates the rendering of this sample code in IE6.


In contrast, the following picture illustrates how the same code renders in IE7.


As you can see,,

's content is rendered beyond the bounds of its parent label

(area with a red border).

CSS Filters
Although a standard like CSS already exists, it does not guarantee that all browsers render the page in the same way. These standards may contain undefined parts, not all components will be executed by all browsers, and there may be problems with known execution. CSS standards do not provide a way to specify a specific browser version, so the web developer community has developed CSS filter (also known as "CSS Hacks"). These filter hides CSS style rules for special browsers using browser problems or not performing features. When we fix these problems and improve the CSS support, some CSS filter will no longer be available.

If you use these filters, you should be aware of their effects. This will help you make the design more efficient and adaptable to the improved CSS for future versions of Internet Explorer and other browsers.

In IE7, we have modified a number of potential parsing errors that might prevent the following filter from working correctly in the previous IE version. If your page contains these filter, please remove or replace them.

*html Filter

This CSS filter is based on a parse error. It is used to display excluded content. The content will be ignored by the Internet Explorer7 and later versions.

/* The following rules used to apply
IE but now get ignored by IE7 and higher * *
* html{
}

* HTML body{
}

* HTML. foo{
}

Underline Filter

This CSS filter is based on a parse error. It is used to display the excluded attributes. This content is now considered a custom attribute by Internet Explorer and later versions. A custom attribute means that it can still be used, but does not have a value by default.

/* The following rule used to apply Min-height
To browser The WHO understand the This property and
Height to IE. In IE7, _height would be treated
As a custom property (no height would be applied) * *

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

/**/Annotation Filter

This CSS filter is based on a parse error. It is used to hide attributes in strict mode (this filter does not work in quirk mode). In the Internet Explorer7, this attribute can be parsed and used.

/* The following rule used to hide the height
property to Internet Explorer. In IE7, the
Value would be applied * *

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

HTML > Body Sub-node filter

This CSS filter is based on a previous, not executed, feature in Internet Explorer. It is used to hide declaration exclusions. Starting with version 7, Internet Explorer can use attributes in a declaration.

Note: When used to detect a browser or browser version, the CSS style rules for dependent child nodes are considered only CSS filter.

/* The following rule used to hide the height
property to Internet Explorer. In IE7, the
Value would be applied * *

HTML > body {
height:300px;
...
}

"head + Body" adjacent node filter

This CSS filter is based on a previous, non-executed feature in Internet Explorer. It is used to hide declaration exclusions. Starting with version 7, Internet Explorer can use attributes in a declaration.

Note: When used to detect versions of browsers or browsers, CSS style rules that depend on neighboring nodes are considered only CSS filter.

/* The following rule used to hide the height
Property from Internet Explorer. In IE7,
The value would be applied * *

Head + Body {
height:300px;
...
}

"Head:first-child + body" first child node and neighboring node filter

This CSS filter is based on two previous, non-executed attributes (: First-child pseudo classes and adjacent nodes) in Internet Explorer. It is used to hide declaration exclusions. Starting with version 7, Internet Explorer can use attributes in a declaration.

Note: CSS style rules that connect first-child nodes to neighboring nodes are considered CSS filter only when they are used to detect a browser or browser version.

/* The following rule used to hide the height
Property from Internet Explorer. In IE7,
The value would be applied * *

Head:first-child + Body {
height:300px;
...
}

My page has been corrupted, what should I do?
This section explains the possible strategies for handling problems.

handling default behavior for overflow:visible
If it is not set wide and high, the area in your layout should be as normal as it is in IE6 (unless too many words or prior content may cause an overflow), this should be good.

Because of the new behavior, your layout may be compromised in two situations:

1.
The width and height have been set, and it is not realized how much of the content is actually larger than the set value.

This situation is well resolved. Just know how much content is right (the ruler on the Developer toolbar can help you) and make the appropriate size for the area.

2.
There is dynamic content that needs to change the size of the area. This occurs when the content is inserted dynamically, or when the font size is not specified and the user modifies them.




<br>CSS:Overflow:visible and Min/max <br>

This is a DIV with a fixed width and height
Pixels, in IE 6, the height of the DIV'll extend to the
The height of the content. In IE7, the height of the DIV is 100px as
specified, but the text overflows outside of the box.

You can correct this behavior by using the new Min-height attribute in a modern browser like IE7. To ensure that these behaviors do not change in older IE, we recommend using conditional annotations.




<br>CSS:Overflow:visible and Min/max <br>

This is a DIV with a fixed width and height
Pixels, in IE 6, the height of the DIV'll extend to the
The height of the content. In IE7, the height of the DIV is 100px as
specified, but the text overflows outside of the box.

In Iestyles.css, you should specify IE6 and the behavior of the version.

. DivClass1
{
height:100px; Applies only to versions that does not understand min-height
}
The use of conditional comments is a simple, maintainable way to separate behavior from older versions of IE from more standard behavior in IE7.


error page caused by improved CSS filter
If the page design does not display correctly in IE7 Strict mode, you have the following three options:

A. First, try to establish a standard design that can be used across browsers. By simplifying the pages, you can solve these problems and reduce maintenance costs.

B. Use conditional comments.

c. If you have to use CSS filter, consider the filter that the industry can run normally on previous versions of browsers. This minimizes the risk of future problems in your work.


using conditional Comments
Starting with Internet Explorer 5, conditional comments is available and provides a simple, maintainable way to detect IE's browser type and version. Because the syntax is based on annotations, other browsers will only ignore this situation. This is a good way to replace the *html filter. To ensure that it is clear, we recommend that you use conditional annotations to set up a join.



effective use of CSS filter

We've learned about the pain that comes from handling browser behavior differently. CSS filter if used with two guidelines, then it is good to use it.

A. Only consider targeting filter in the "older than now" version of the browser, which ensures that your filter does not have a problem when a new version appears. Some filter, such as only for IE5.5 or even earlier, is safe to use.

B. To know that they are filter. Be sure to fix them in a timely manner when problems arise. and provide comments that can clearly indicate that they are filter.

We've been looking at compatibility requirements.

We learned from the developer community that some feedback has been asking for more compliance with standard rendering behavior. We are dealing with these requirements, and we also need to consider the user does not want to destroy the page requirements. In order to find a balance point, we introduced the strict mode in IE6, so that the author can make a more standard page rendering. In IE7, page authors use a strict mode (quirks mode) that will not change behavior and will not be affected by corrupted CSS filter. In strict mode, we have, and will continue to ensure, changes in the more complex standards. As a by-product, content in the old strict version can be corrupted when our changes are more standard-compliant. This will happen on the corrupted CSS filter. This relies on the execution of specific behaviors, not CSS specifications.

We hope this article will help you understand the root causes of CSS compatibility issues in IE7 and provide enough advice to help you reduce problems.