软件技术Firefox3.5 CSS Sprites Bug

米花 发表 于:10年前 浏览量:183

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

HTML代码如下

Test1

Test2

Test1

Test2

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;

}

.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代码如下

Test1

Test2

Test1

Test2

修改后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;

}

.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查看具体请求如下:

修改后的测试页面在此。

来自:http://varnow.org/?p=241

本文由 米花发表。转载请注明出处:https://www.mihua.net/list/0/1459.html

发表评论

您的昵称:

猜你喜欢

最近更新