9

我猜这将是非常具体的......我的 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 文件中的背景图像之前的文本......

我在这里有什么选择？

4

1 回答 1

8

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

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;
}
于 2013-10-30T11:19:39.970 回答