IE7 Child Selector Comment Bug

Affected Versions

This bug affects: IE7

Symptoms

A selector containing child selector that is followed by a comment is ignored

Date of the Tutorial

Mon Aug 10 05:04:59 2009

Description

This bug is used to specify rulesets that neither IE6 nor IE7 will see. IE6 will ignore it because it doesn't support child selector and IE7 will ignore it because it has this comment bug. To the demo!

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div></div>

CSS Code:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    background: #ddd;
}

html > /**/ body div {
    background: #00f;
}

In all sane browsers, the <div> will be of blue color. In IE7 this rule will be ignored because there is a comment following the child selector.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Mon Aug 10 05:08:40 2009

Fixed Versions

All of the affected

Description

I'm writing this solution only in the spirit of simply having one (as well as showing that the bug is indeed due to the comment) because I doubt any sane person would love to have a comment right in the middle of the selector, never mind leaving it there after finding out what causes the bug :) Let's glance at what we got here:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<div></div>

CSS Code:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    background: #ddd;
}

html > body div {
    background: #00f;
}

Not much to say here. Our comment is gone and so is the bug.

Comments

name

Sun Feb 6 21:06:54 2011

Great,
Zoffix Znet

Wed Jul 28 16:44:33 2010

@solfish: AH! Turns out I linked the demo to the fixed solution somehow.

Fixed everything now :) Thanks for spotting this!
sofish

Wed Jul 28 09:41:20 2010

@Zoffix Znet: =,= im just checked the source code of the 1st demo, and it appears to me that code is same as the "fixed" demo... than...
Zoffix Znet

Wed Jul 28 05:24:58 2010

sofish, IE6 doesn't support child selectors at all. IE7 does, but not if you use a CSS comment right after it.
sofish

Wed Jul 28 03:09:48 2010

Hi,it seems that the bug doesn't appears in IE7, but ie6.