hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored

Date of the Tutorial

Thu Aug 13 15:26:51 2009

Description

This bug is triggered when you have a selector with :focus that is followed another simple selector, which can be combined by a combinator (e.g. a child selector). What happens is that the ruleset with such selector is ignored. Let's take a look:

Demo

HTML Code:

<button>Click me so I'd get focus!</button>
<p>Test 2</p>

CSS Code:

:focus + p {
    font-weight: bold;
    font-size: 200%;
}

In sane browsers, clicking the button for it to obtain focus will cause the ' element"><p> element's text to become bold and larger in size. Not the case in IE8 - the ruleset is ignored.

Solutions

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

Solution (Clean Solution)

Date of the Solution

Thu Aug 13 15:31:20 2009

Fixed Versions

All of the affected

Description

The solution to this bug is clean as a whistle. Here's the fixed demo:

HTML Code:

<button>Click me so I'd get focus!</button>
<p>Test 2</p>

CSS Code:

:focus + p {
    font-weight: bold;
    font-size: 200%;
}
:focus {}

We have restored "normality" by adding an extra ruleset with a :focus selector. The actual ruleset can be completely empty - that fact does not affect the fixing of the bug.