hasLayout.net

Bookmark and Share

IE7 Child Selector Comment Bug

Table of Contents

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

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: