IE8 CSS rule "canibalism"?

Question

This one is going to be very specific I guess... My CSS works flawlessly on all browsers exept IE8. EI10's IE8 emulation does not reflect this bug.

Here is my CSS line that causes problem:

.flag{
    display:block;
    width:24px;
    height:16px;
    background-image:url('../img/flags_sprite.png');
    background-repeat:no-repeat;background-position:0 0;
}

Note that this CSS part is condensed on a single line in production like so:

.flag{display:block;width:24px;height:16px;background-image:url("../img/flags_sprite.png");background-repeat:no-repeat;background-position:0 0}

The width is not taken into consideration by the browser, when inspecting the Styles parsed by the browser I can see this:

.flag
    background-image: url(../img/flags_sprite.png); WIDTH: 24px
    display: block
    background-repeat: no-repeat
    background-position: 0px 0px
    height: 16px

Notice that the width is lost as it is treated as part of the background-image declaration. I am mesmerized by this, seeing that the width declaration is textually before the background-image in the CSS file...

What are my options here?

Answer 1

I saw that some time ago, solution that worked for me was to write background definition in single line:

background: url("../img/flags_sprite.png") no-repeat 0 0;

Another idea is to split definition of .flag into 2 parts, also works for me:

.flag{
    display:block;
    width:24px;
    height:16px;
    background-repeat:no-repeat;
    background-position:0px 0px;
}
.flag{
    background-image:url('../img/flags_sprite.png');
}

Another solution I ran into is to define all 5 background-xxx properties (-color, -image, -repeat, -position, -attachment). Lack of any cause problem. Example:

.flag{
    background-color: transparent;
    background-image:url('../img/flags_sprite.png');
    background-repeat:no-repeat;
    background-position:left top;
    background-attachment: fixed;
    display:block;
    width:24px;
    height:16px;
}