Question

这个将是非常具体的我猜...我的CSS在IE8所有浏览器上完美运行。 EI10的IE8仿真没有反映出这个错误。

这是导致问题的CSS行：

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

请注意，此CSS部分在生产中的一行中压缩，如下所示：

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

浏览器不考虑宽度，在检查浏览器解析的样式时我可以看到：

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

请注意，宽度会丢失，因为它被视为背景图像声明的一部分。我被这个迷住了，看到宽度声明是文本上在CSS文件中的背景图像之前......

我有什么选择？

Answer 1

我前段时间看到，对我有用的解决方案是用单行编写背景定义：

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

另一个想法是将.flag的定义分为两部分，也适用于我：

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

我遇到的另一个解决方案是定义所有5个background-xxx属性（-color，-image，-repeat，-position，-attachment）。缺乏任何原因问题。例如：

.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;
}

IE8 CSS规则“同类相食”？

1 个答案: