Firefox3.5 CSS Sprites Bug

今天猛然发现在Firefox3.5下,如果CSS中对同一个背景图片使用了多次,则对同一个图片会发送多次请求,也就是说没有缓存背景图片。因此,这也就造成了CSS Sprite在Firefox3.5中失效了,具体的例子可以围观这个测试页面

 

HTML代码如下

<div class="test1">Test1</div>
<div class="test2">Test2</div>

CSS代码如下

.test1{
    background: url(https://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) 0 -207px no-repeat;
    width: 600px;
    height: 30px;
}
.test2{
    background: url(https://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) 0 -238px no-repeat;
    width: 270px;
    height: 60px;
}

通过Firebug查看具体请求如下:

经查证,这是一个已知Bug,仅存在于Firefox3.5中,不过在Firefox3.6版本中已经修复了。

如果无视Firefox3.5则可以到此为止,如果想要Hack这个问题则可以用以下的方式解决:

给每个使用背景图的元素添加一个相同的class name,并在这个class name中定义背景图片并在特定的类名中定义背景图片位置。这个方式也许并不算一个hack,仅仅是设置背景图片的另一个途径罢了,而且在一些情况下还可以节省字节。

修改后HTML代码如下

<div class="test test1">Test1</div>
<div class="test test2">Test2</div>

修改后CSS代码如下

.test{
    background: url(https://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) no-repeat;
}
.test1{
    background-position:0 -207px;
    width: 600px;
    height: 30px;
}
.test2{
    background-position:0 -238px;
    width: 270px;
    height: 60px;
}

通过Firebug查看具体请求如下:

修改后的测试页面在此。

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">