The following table summarizes the comment bugs in MSIE for Windows and Mac. Other browsers tested thus far (NS 4.x, NS 6.2.1, Opera 5.02 and 6.01, Mozilla 0.9.9 and 1.0) using the set of tests below have shown no comment bugs.
Keep in mind that testing has not been comprehensive and has focused on the width property since these tests were conducted with the objective of creating the alternate box model hacks. Therefore, it may turn out that a comment that apparently forces a version of IE to ignore any declaration where the comment is found will in fact only ignore declarations that contain particular properties or values and not others (i.e., it will have a rating of SDI instead of DI). Be that as it may the table does highlight which types of comments are known to trip IE.
All the types of comments indicated in the table below are valid CSS.
You may wish to test your browser for comment bugs.
| WS | Whitespace | at least one blank space, tab, or carriage return |
| EC | Empty Comment | no whitespace inside the comment |
| NEC | Non-Empty Comment | at least one whitespace inside the comment |
| RI | Rule Ignored | the entire rule set (selector and declaration block) is ignored by the browser |
| DI | Declaration Ignored | the declaration where the comment is found is ignored by the browser |
| FDI | Following Declaration Ignored | the declaration right after the declaration where the comment is found is ignored by the browser |
| SDI | Some Declarations Ignored | declaration is ignored or not depending upon the property/value where the comment is found |
| Position & Type of Comment | Example | IE/Win | IE/Mac | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.0 | 5.5 | 6 | 5.0 | 5.1 | 5.2.2 | |||||
| selector + EC | div/**/ {width: 300px} |
RI | ||||||||
| selector + NEC | div/* */ {width: 300px} |
RI | RI | RI ? | ||||||
| EC + property | /**/width: 300px |
|||||||||
| NEC + property | /* */width: 300px |
|||||||||
| property + EC | width/**/: 300px |
DI | DI | DI | DI | |||||
| property + NEC | width/* */: 300px |
DI, FDI | DI, FDI | DI | DI | |||||
| property + WS + EC | width /**/: 300px |
DI | ||||||||
| property + WS + NEC | width /* */: 300px |
DI | ||||||||
| EC + value | width: /**/300px |
DI | ||||||||
| NEC + value | width: /* */300px |
DI | ||||||||
| EC + WS + value | width: /**/ 300px |
DI | ||||||||
| NEC + WS + value | width: /* */ 300px |
DI | ||||||||
| value + EC | width: 300px/**/ |
DI | ||||||||
| value + NEC | width: 300px/* */ |
DI | ||||||||
| value + WS + EC | width: 300px /**/ |
SDI | ||||||||
| value + WS + NEC | width: 300px /* */ |
SDI | ||||||||
Note:
IE5.5/Win has a complicated behavior with certain properties when the property name is correctly declared but part of the declaration is faulty, say, the color value is missing or the unit identifier has been misspelled, or if a type of comment that trips it up (see table) is present. The declaration itself is ignored, as it should be according to the CSS Specs. But on some properties (such as border and background) IE also ignores the values of these properties even if they had been declared earlier in another rule. In short it will not inherit the values of some properties. For example, given:
div {background: red;}
div#newbox {background: /**/blue;}
IE5.5/Win will ignore the declaration in the second rule because of the comment, and it will also ignore the declaration in the first rule, which should not be the case. IE5.5/Win will neither apply a blue nor a red background. This is not the case if we had used background-color instead in the second rule.
Moreover, with these properties one can override the commented values within the same rule only by redeclaring the property (this time without the comment of course) after the commented declaration. In the following example the background for div#newbox will be green. Had we declared background: green; before background: /**/blue; neither declaration will be applied.
div#newbox
{
background: /**/blue;
background: green;
}
IE5.5/Win does not exhibit any of the above quirks on properties such as width, height, and padding.