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

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

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

 

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

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

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

 

我测试怎么是chrome16会出现横竖线，而FF11和IE7不会。

看你是缩小 还是放大了， 这个应该是跟浏览器缩小、放大视图的算法有关系。