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.