以下内容摘自MSDN

Cascading Style Sheet Compatibility in Internet Explorer 7

Markus Mielke
Dave Massy
Microsoft Corporation

January 31, 2006

Updated July 7, 2006

Introduction

Internet Explorer 7 contains a number of improvements to cascading style sheet (CSS) parsing and rendering over IE6. These improvements are aimed at improving the consistency of how Internet Explorer interprets cascading style sheets as recommended by the W3C in order that developers have a reliable set of functionality on which to rely.

In some cases a few of these changes may have the effect of making existing content render in ways that are not compatible with IE6. This is often seen with elements moving to a different area of the page or overlapping content when viewed in IE7. These issues are most common on content that is using particular CSS constructs (often know as "hacks" or filters) to work around bugs that existed under the strict mode in IE6. In this article we'll discuss why pages might be broken due to updated CSS support and the best ways to address the issues that result from it.

Box Model Changes

In IE7, we changed the behavior of overflow to align with the CSS2.1 box model. Overflow is describes as a method to specify whether content of a block-level element is clipped when it overflows the box. The default is visible. This value (visible) indicates that content is not clipped, i.e. it may be rendered outside the box. IE in the past did not support this behavior. Content always had to fit within a box dimensions. Imagine a box with width and height of 100px. If the content is smaller than 100px then IE would follow the specifications. If the content exceeded the size we would auto-grow the box to fit the content. To demonstrate this behavior, take a look at the following code sample.

<style type="text/css">
div        { width : 100px; height: 100px; border: thin solid red;}
blockquote { width: 125px; height: 100px;
margin-top: 50px; margin-left: 50px;
border: thin dashed black}
cite       { display: block;
text-align: right;
border: none}
p          { margin: 0;}
</style>
<div>
<blockquote>
<p>some text long enough to make it interesting.</p>
<cite>- anonymous</cite>
</blockquote>
</div>

The following image shows how this code sample is rendered in IE6.

In contrast, the next figure shows how IE7 renders the same code.

As you can see, we now honor the height and width settings of a box. In this example, the <blockquote> content now renders outside of the boundaries of the parent <div> (box with red borders).

If your layout relied on us "growing" the box (if your content did not fit the dimensions you gave it) then this can lead to breaks. You can easily discover breaks related to overflow by observing content suddenly overlapping other content.

CSS Filters

Even though standards like CSS are available it is not a guarantee that all browsers render the same way. The standard might have undefined parts, not all components are equally implemented by all browser vendors, and existing implementations might have bugs. The CSS standard does not provide a way to target specific browser versions and as a result the Web developer community has developed CSS filters (also called "CSS hacks"). These filters take advantage of browser bugs or unimplemented features to hide CSS style rules from specific browsers. As we fix these bugs and improve CSS support, some CSS filters will stop working.

If you use such filters, you should understand their effects. In this long run, this will help you create designs that more effectively adapt to improved CSS support in later versions of Internet Explorer and other browsers. 

In IE7, we fixed many underlying parser bugs that prevented the following filters from working in earlier versions of IE. If your page contains these filters, please remove or replace them (at the end of this article we will offer other means of targeting reliable IE versions).

* HTML Filter

This CSS filter is based on a parser bug. It used to show rules exclusive to Internet Explorer. These constructs will now be ignored by Internet Explorer 7 and later.

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

_ Underscore Filter

This CSS filter is based on a parser bug. It used to show properties exclusive to Internet Explorer. These constructs will now be treated as a "custom property" by Internet Explorer 7 and later. Custom property means that it is still in the OM and can be queried through script but does not natively apply its value.

/* The following rule used to apply min-height
to browser who understand this property and
height to IE.  In IE7, _height will be treated
as a custom property (no height will be applied) */
.myclass {
min-height: 300px;
_height: 300px;
...
}

/**/ comment filter

This CSS filter is based on a parser bug. It used to hide properties exclusive to Internet Explorer under the strict doctype (this filter did not work under quirks mode). In Internet Explorer 7, the property will now be parsed and applied.

/* The following rule used to hide the height
property to Internet Explorer. In IE7, the
value will be applied */
.myclass {
height/**/: 300px;
...
}

"html > body" child selector filter

This CSS filter is based on a previously unimplemented feature in Internet Explorer. It used to hide declarations exclusive to Internet Explorer. Starting with version 7, Internet Explorer will apply the properties within the declaration.

Note: CSS style rules that rely on child selectors are only considered CSS filters when used to detect specific browsers or browser versions. 

/* The following rule used to hide the height
property to Internet Explorer. In IE7, the
value will be applied */
html > body {
height: 300px;
...
}

"head + body" adjacent selector filter

This CSS filter is based on a previous non-implemented feature in Internet Explorer. It used to hide declarations exclusive to Internet Explorer. Now Internet Explorer will apply the properties within the declaration.

Note: CSS style rules that rely on adjacent selectors are only considered CSS filter when used to detect specific browsers or versions.

/* The following rule used to hide the height
property from Internet Explorer. In IE7,
the value will be applied */
Head + body {
height: 300px;
...
}

"head:first-child + body" first child and adjacent selector filter

This CSS filter is based on two previous non-implemented features in Internet Explorer (:first-child pseudo class and the adjacent selector). It used to hide declarations exclusive to Internet Explorer. Now Internet Explorer will apply the properties within the declaration.

Note: CSS style rules that combine :first-child selectors with adjacent selectors are only considered CSS filters when used to detect specific browsers or browser versions.

/* The following rule used to hide the height
property from Internet Explorer. In IE7,
the value will be applied */
head:first-child + body {
height: 300px;
...
}

My Page is Broken, What Can I Do?

This section presents possible strategies for working around problems.

Working around overflow:visible default behavior

If no width or height is set, then boxes in your layout should pretty much behave like they did with IE6 (exceptions if you have very long words or pre content that might overflow the viewport). You should be fine here.

There are two cases where your layout might break due to the new behavior:

1. If you have set a width or height on your content and you did not realize that your content is actually larger than the set dimensions.

   This case is very easy to solve. Just identify the correct size of your content (the ruler of the Developer Toolbar can help you do it) and set the correct dimensions on your box.

2. If you have dynamic content that requires changes to your box size on the fly. This can happen if you insert content dynamically, or you did not specify a font size and the user changes it as part of the user settings.

   There is a declarative solution using min/max width/height properties that can correct behavior issues introduced by the overflow correction. Consider the following example.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
       <html>
       <title>
       CSS: Overflow:visible and Min/Max
       </title>
       <style>
       .DivClass1
       {
       background:orange;
       width:150px;
       height:100px;
       }
       </style>
       <body>
       <div contenteditable=true class=DivClass1>
       this is a DIV with a fixed width and height
       of 100 pixels, in IE 6, the height of the DIV will extend to the
       height of the content. In IE7, the height of the DIV is 100px as
       specified, but the text overflows outside of the box.
       </div>
       </body>
       </html>

   You can correct this behavior by using the new min-height property for all modern browsers like IE7. To ensure that your behavior does not change for older versions of IE, we recommend the use of conditional comments.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
       <html>
       <title>
       CSS: Overflow:visible and Min/Max
       </title>
       <!-- Will only be read by IE versions less then IE 7-->
       <!--[if lt IE 7]>
       <link rel="stylesheet" type="text/css" href="Demo/iestyles.css" />
       <![endif]-->
       <style>
       .DivClass1
       {
       background:orange;
       width:150px;
       min-height:100px; // will be ignored by IE6
       }
       </style>
       <body>
       <div contenteditable=true class=DivClass1>
       this is a DIV with a fixed width and height
       of 100 pixels, in IE 6, the height of the DIV will extend to the
       height of the content. In IE7, the height of the DIV is 100px as
       specified, but the text overflows outside of the box.
       </div>
       </body>
       </html>

   In iestyles.css, you would specify the behavior of IE6 and below.

   .DivClass1
       {
       height:100px; // applies only to versions that do not understand min-height
       }

   The use of conditional comments is an easy and maintainable way to separate behavior of older IE versions form the more standards compliant behavior of IE7.

   Broken pages due to CSS filter enchancements

   If your page designs break in IE7 strict mode, you have three options:

   1. First, try to create standards-based, cross-browser designs. By simplifying your page, you might remove the problem and reduce your maintenance cost.

   2. Use conditional comments to work around issues that only affect Internet Explorer.

   3. If you have to use CSS filters, consider only filters that target older browser versions. This will minimize your risk of future problems.

   Using Conditional Comments

   Conditional comments have been available since Microsoft Internet Explorer 5, and provide easy and maintainable ways to detect IE's browser type and version. Since the syntax is based on comments, other browsers will just ignore the statements. This is a great way to replace filters like the * HTML filter that specifically tries to target IE. To keep it clean we propose that you use conditional comments to set up a link to an IE-specific style sheet.

   <!--[if IE]>
       <link rel="stylesheet" type="text/css" href="iestyles.css" />
       <![endif]-->
       

   Effectively Using CSS filters

   We recognize the pain caused by working around differences in browser behavior. CSS filters are not inherently bad if they are used with two guidelines in mind:

   1. Target ONLY "older than current" (frozen or abandoned) versions of browsers. This will ensure that your filter will not break with new browser releases. There are filters for example that only target IE5.5 and earlier. They are relatively safe to use.

   2. Be aware that they are filters. Make sure you can maintain them in case they do break (for example if a security patch is issued for a down level version etc.). Provide comments that clearly mark them as filters.