CSS Sprites 使用注意之—— 避免因浏览器放大导致的图片异常

    近日有朋友说，将浏览器放大后，会发现 zTree 出现多余竖线，导致显示有些异常。经检查原来是 v3.0 制作时为了优化网页，使用了 CSS Sprites 技术，因此把图标都放在一起。但图标过于密集所以在放大、缩小浏览器视图的时候，会把图标周围相邻1像素的图案计算进来，从而导致了显示异常。

    IE 问题最严重， Chrome 略好。下面请看截图（IE8 视图放大到 165%）：

 

    解决方案： 不要让图标过于紧凑，左右、上下图标保持1像素的距离即可。

     zTree v3.1 发布时也将解决此问题。

    有兴趣的朋友可以下载附件中的 Demo 比较两个 div 色块在浏览器视图任意放大缩小时的变化。

 

评论

7 楼 zTreeAPI 2012-02-13  

ilovejsj 写道

哥们的粉丝团很强大啊，哈哈。http://www.iteye.com/news/24208

呵呵，看到这个消息我很高兴呀！ 感谢各位支持！

6 楼 ilovejsj 2012-02-13  

哥们的粉丝团很强大啊，哈哈。http://www.iteye.com/news/24208

5 楼 biner 2012-02-10  

感谢,我尝试修改看看

4 楼 zTreeAPI 2012-02-10  

biner 写道

LZ能否提供一份大图标版皮肤?或者修改方法?

可以在 http://code.google.com/p/jquerytree/downloads/list  找到以前的 smooth系列 24x24图标(83个).zip 和 smooth系列 18x18图标(83个).zip 之类下载

3 楼 zTreeAPI 2012-02-10  

biner 写道

LZ能否提供一份大图标版皮肤?或者修改方法?

真不好意思，现在没有时间做大图标去，也没有时间写详细的方法。 你可以对照以前 2.x 版本的大图标的 css 文件 进行比较看看了。。

大概基本上就是修改 css 中 行高，以及 图标大小的问题，现在 v3.0 做的更细致一些，所以调起来肯定也会更麻烦一点了！

有空的时候一定写一篇 大图标的修改方法。。。抱歉！

2 楼 biner 2012-02-10  

LZ能否提供一份大图标版皮肤?或者修改方法?

1 楼 zhangyaochun 2012-02-02  

感谢LZ,支持一下