hasLayout.net

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 IE7 will see. IE7 will ignore it because it has this comment bug. To the demo!

Demo

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 ' element"><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.