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(http://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) 0 -207px no-repeat;
    width: 600px;
    height: 30px;
}
.test2{
    background: url(http://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(http://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查看具体请求如下：

修改后的测试页面在此。