IE6 CSS bug when using floats and background-color

Examples

Each example on this page contains three floated items, plus the CSS code (unfloated) needed for that example; view source for more detail. The examples display perfectly in Firebird and Opera, and curiously also in IE5 - although that does have the hidden floats problem of example 4. To show the bug in IE6, you might have to scroll the page so that the examples are viewable then hit Refresh (F5); the width of the browser window also factors into whether the bug appears or not - around 400px wide seems 100% repeatable here.

Example 1

One
Two
Three
.main1 {
}

Example 2

One
Two
Three
.main2 {
    background-color: #ffcccc;
}

Example 3

One
Two
Three
.main3 {
    line-height: 1.1;
    background-color: #ffcccc;
}

Example 4

One
Two
Three
.main4 {
    position: relative;
    background-color: #ffcccc;
}

Example 5

One
Two
Three
.main5 {
    background-color: #ffcccc;
}

.main5 .item {
    position: relative;
}

Example 6

One
Two
Three
.main6 {
    position: relative;
    background-color: #ffcccc;
}

.main6 .item {
    position: relative;
}