CSS Filters and Hacks
Conditional Comments
- 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]