IE7对CSS的支持报告

CSS Filters and Hacks

• Dithered.com's list of CSS filters [5]
• The "Triple-X CSS hack" exclusively for targeting IE7 [6]

Conditional Comments

• ConditionalComment

• VersionVector: According to Microsoft, IE7 Beta 2 expects a conditional comment of [if IE 7.0b]. Therefore, it's probably better to use [if lte IE 6] for targetting IE6 and lower. Keep in mind, however, that [if IE 7.0] will target IE7 final version.

List-item whitespace bug has not been fixed

• This old bug is still around in Beta 2. (along with absolute positioning bugs on the left nav...) [7]

• I posted a test case and workaround on this. The trick is to set widths to the elements displayed as blocks.[8]

@import stylesheet driven sites have no a:hover

This bug is in the beta2 preview, but has already been fixed by Microsoft: "people reported that :hover would not work from an @import. That's a bug and already fixed in our builds." --Markus [MSFT] ([9])

Can be resolved in the beta by embedding

#fubar a:hover {float: inherit;}

in the head of the affected documents.

see: http://www.projectseven.com/csslab/ie7/import.htm

(new in IE7b2)

CSS Properties

background

• the origin of the background, background-position: 0 0; refers to the padding edge or on the border edge, depending on the HasLayout status of the element [10]
• background images get lost on multi line inline links (old problem) [11]

border

• CSS 'transparent' border color still not supported; border colors set to 'transparent' are rendered instead as the font color (default is black) in IE7 [12] * fixed in the beta release of 24 April 2006, version 7.0.5346.5 *

display

• It has been stated that the 'table*' values of the 'display' declaration will *not* be supported. (old problem) [13]

float

• Elements with assigned height correctly allow floats to stick out of them, but the protruding part is ignored by the following boxes (new Jan31, Mar20) [14]
• problem with float + clear on the same element (old, Mar20) [15]

line-height and vertical-align

• The "line-height/replaced element bug" [16] has been corrected, but when line-heigth is not "normal" then vertical-align doesn't work correctly [17]

min-height, max-height, min-width, max-width

Fixed in Mar20:

• IE7b2 still does not support min-height, max-height, min-width or max-width. However, it has been stated a number of times by the programmers in their request topic that these properties are going to be worked on now that overflow: visible is fixed [18]; "min/max we heard the request and working hard on it. Hopefully we make it for IE7." -- Markus [MSFT] [19]

position: relative / absolute / fixed

• a.p. box and lost next margin (old, Mar20) [20]
• a.p. element with auto offset following a float: wrong static position (old, Mar20) [21]
• disappearing absolutely positioned divs next to floats (old, Mar20) [22]
• rtl context: bad rendering of relatively positioned inline box (old, Mar20) [23]
• position: fixed and absolute fail to shrink-wrap if a child HasLayout, i.e. ul has position: fixed and li has max-width (Mar20) [24]
• absolute positioning inside a relative element needs 'HasLayout' on the r.p. anchestor to establish a containing block (old) [25]. The problem has been mostly fixed, but there are still cases of wrong positioning depending on 'external' padding [26]. Also margins collapsing may wrongly affect the positioning.
• Negative top value on position:relative is deducted from border-width of relative positioned ancestor [27]

Fixed in Mar20:

• horizontal scrollbar due to position: relative on non-layout element (new in IE7b2) [28]
• a.p. elements (in standards mode pages) have box model problems, causing content to overflow when not necessary (new) [29], [30]
• a.p. element and wrong relation of percentage width (old) [31]

z-index

• z-index on a.p. elements within r.p. parents results in wrong stacking. Any r.p. element that HasLayout establishes a new stacking context (old, Mar20) [32], [33]

Selectors

Basic Selector Support Tests

These are intended to check whether basic CSS2.1 selector support is present in IE7.

spec link IE7b2 5.2 [Selector Syntax] PASS 5.2.1 [Grouping] PASS 5.3 [Universal Selector] PASS 5.4 [Type Selectors] PASS 5.5 [Descendant Selectors] PASS 5.6 [Child Selectors] PASS 5.7 [Adjacent Sibling Selectors] PASS 5.8.1 [Attribute Selectors] PASS (note 1) 5.8.3 [Class Selectors] PASS 5.9 [ID Selectors] PASS 5.10 [Pseudo-Class Combinations] PASS (note 2) 5.11.1 [:first-child] PASS 5.11.2 [:link and :visited] PASS 5.11.3 [:active, :hover, and :focus] FAIL (note 3) 5.11.4 [:lang] FAIL 5.12.1 [:first-line] FAIL (note 4) 5.12.2 [:first-letter] PASS 5.12.3 [:before and :after] FAIL 6.2.1 [inherit] FAIL

note 1: Almost every test passes; the only exception is the one that tests two attribute selectors being applied at the same time.

note 2: The only part that fails is :active, which IE7 doesn't support.

note 3: Passes :hover; fails :focus and :active. And did anyone notice that IE styles :focus as if it were :active?

note 4: Fails the list item first line test; passes everything else.

IE7 Compatibility List Support Test

Kelly found:

According to my tests on the selectors, IE7b2 supports:

• > (Child)
• + (Direct Adjacent Sibling)
• ~ (Indirect Adjacent Sibling)
• [attr] (Basic Attribute)
• [attr="value"] (Attribute/Value [sort of])
• [attr~="value"] (Attribute/Spaced Values)
• [attr|="value"] (Attribute/Hyphen-Sep Values)
• [attr*="value"] (Attribute Substring Selector)
• [attr^="value"] (Attribute Starting String Selector)
• [attr$="value"] (Attribute Ending String Selector)
• :hover
• :first-child

It doesn't support:

• :focus
• :active
• :lang
• Any CSS3 selector other than mentioned above.

Note that when I say "supports" and "doesn't support", I mean when compared to IE6. So what is supported in IE6 should be supported here (I haven't tested things like :first-line and :first-letter, though).

Also, form elements seem to show strange bugs with the selectors. Need more research on this.

(Kelly: I used Dean Edwards [IE7 compatibility list] to test these selectors. Obviously, the Javascript library was off.)

pseudo-classes, pseudo-elements

• updated testcases: [pseudo classes and elements]

原文请参阅：http://css-discuss.incutio.com/?page=IE7