[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-css_image_sprites_on_retina_screen":3,"$f2cx97cpqpf7k6":23},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":14,"permalink":15,"excerpt_src":16,"media_type":16,"media_title":16,"media_author":16,"media_url":16,"rating":16,"layout":16,"pv":17,"admin_only":17,"created_at":18,"updated_at":18,"deleted_at":16,"status":19,"html":20,"excerpt":21,"cover":22},162,"article","css_image_sprites_on_retina_screen","Retina屏下的CSS雪碧图","2014-03-19 13:39","web",[11,12,13],"CSS","雪碧图","背景图","\nCSS雪碧图早已经成为前端知识体系中一个必备知识了，时至今日，可能很多人都觉得这一块已经没有什么东西可以再讲了的。但事实上雪碧图一直都可以引出新的话题，比如从最早的连接数和体积的平衡到格式之争到图像摆放位置的策略，再到合并图像的颗粒度，再到内存占用、CPU占用等性能问题……\n\n没错，今天还要在这一古老的话题上展开，引入一个新的问题，那就是雪碧图在retina屏下存在的问题及应对方案。（值得注意的是，retina屏一般指分辨率为普通屏幕两倍的屏，这样按照普通尺寸开发出来的网站相当于被放大了2倍，会导致图像模糊之类的现象产生，理想的解决方案是为retina专门适配一套皮肤，但本文关注的问题是未适配retina屏幕的网站所出现的问题。）\n\n> 雪碧图本身不是浏览器或者web标准中的技术，因此它的不少细节取决于浏览器的实现，本文中的讨论的内容正是如此，为避免争议，本文所有结论的得出场景限定为Mac OSX 10.9.1、Chrome浏览器V33。是否适用iPhone、iPad等场景未做相应测试。\n\n## 无处不在的白边\n\n如前文所述，在retina屏上浏览未做专门适配的网站，会出现图像模糊等问题，无法达到最佳效果，但一般情况下，仍然处于可以接受的范围。不过，在某些网站上，却出现了比图像模糊更糟糕的情况：\n\n![WebQQ在retina屏下出现白边](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F1.png)\n\n\u003C!-- more -->\n\n![财付通首页菜单在retina屏下出现白边](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F2.png)\n\n![支付宝的按钮在retina屏下出现白边](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F3.png)\n\n从上面三张图看到，不少的互联网产品在retina屏下都出现了白边。那么这些白边出现的原因是什么呢？通过查看这些出问题的页面，发现存在一个共同点，那就是这些白边所在的地方都使用了背景图，而且都是使用雪碧图合并的。于是问题就浮现出来了，正是由于雪碧图在retina屏上的放大导致了白边的产生。更为技术化的表达则是，**图片放大过程中进行了插值运算，导致原来整齐的图片边界混入了插值后模糊的像素**，从而导致原来整齐的边界处出现“白边”。\n\n打开WebQQ的雪碧图（\u003Chttp:\u002F\u002F0.web.qstatic.com\u002Fwebqqpic\u002Fpubapps\u002F0\u002F50\u002Fimages\u002Feqq_sprite.gif?t=20111011001>），就可以验证这一结论。\n\n![WebQQ雪碧图](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F4.gif)\n\n如果您在阅读本文时刚好使用的retina屏幕，可能已经能看到图标边上的白边了，为了统一说明，特放上图像编辑软件中局部放大的图片。\n\n![WebQQ雪碧图局部放大](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F5.png)\n\n图中可以看到，边缘是非常整齐的，但我们在retina屏上截到的图却是这样：\n\n![WebQQ雪碧图局部放大](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F6.png)\n\n可以看到，由于retina屏下，图片被强制放大，导致了原本整齐的边界不再整齐，从而使得页面上出现“白边”。\n\n## 真的是因为雪碧图吗\n\n至此，我们已经推断出白边是因为图片被放大而导致，那么这跟雪碧图有关系吗？如果不用雪碧图会出现这样的现象么？为了验证这个结论，本文曾一度中断，最终还是拿到了比较令人信服的结果。\n\n首先，我们准备一张如下的图片：\n\n![实验用图1](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F7.png)\n\n这张图放了四个色块，其中左上和右下的色块有留白。接下来我们在浏览器中打开它，结果如下：\n\n![实验用图1](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F8.png)\n\n可以看到，图片中有颜色交界的地方都有插值运算而导致模糊，但边缘却是清晰的！也就是说，如果没有拼图的话，浏览器是可以处理好图片的边缘的。为了保险起见，接下来又做了一个实验，准备了一张20*20的纯红色图片，并与CSS写的红色背景进行混合，看看是否有“白边”出现。\n\n![实验用图2](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F9.gif)\n\n可以看到，在CSS背景色不断变化的过程中，图片与背景可以完全融合，没有任何奇怪的现象出现。\n\n至此，我们终于判定，导致“白边”的原因就是因为雪碧图中不同图像之间在拼合后产生了插值而导致边缘部分模糊。\n\n## 解决之道\n\n知道了原因就好解决了，既然白边的出现是因为插值，并且这个插值行为不可控，那就只好将插值的部分移出视野之外了。讲人话就是：切图的时候多留点“出血”。\n\n继续拿WebQQ为例，如上面所说，原文中聊天气泡图标的背景宽度是20px，两边各加1px，总共22px，效果如下：\n\n![WebQQ图标改进1](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F10.png)\n\n![WebQQ图标改进1效果](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F11.png)\n\n可以看到白边已经减少了不少，但仍然存在。继续在两边各加1px，总共24px，效果如下：\n\n![WebQQ图标改进2](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F12.png)\n\n![WebQQ图标改进2效果](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F13.png)\n\n至此，问题完美解决，结论是：\n\n**切图时请为图标在各个方向上多留2px空间**，即可保证retina屏下不出现意料之外的毛边（白边）。\n\n## The End?\n\n这就完了？当然没有，还有另外一类案例解决不了，就是开头提到的支付宝的按钮。如果你不记得了，没关系，我再放一次图：\n\n![支付宝的按钮在retina屏下出现白边](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F3.png)\n\n看一下它的雪碧图(\u003Chttps:\u002F\u002Fi.alipayobjects.com\u002Fe\u002F201204\u002F2vCVR5Bh4d.png>)和结构：\n\n![支付宝按钮雪碧图](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F14.png)\n\n![支付宝按钮结构](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F15.png)\n\n可以看出，这个按钮其实是由左边两边拼合而成（分别由内外两层元素组成），白边来自右边的结构。如果把左边的背景屏蔽掉，会看得更清楚：\n\n![支付宝按钮结构](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F16.png)\n\n这种情况下，背景图小于容器本身，因此无法将插值部分排除到视野外，也即上面说的多留2px也无法解决。（事实上左边已经留有N像素了……）那就只好再利用上面在验证是否是雪碧图才有问题时说的另外一个结论了：边缘部分是不会被插值的。\n\n于是，将这个雪碧图需要插值的部分改到边缘去，如下图（只改了上面的几个）：\n\n![支付宝雪碧图修改版](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F17.png)\n\n效果如下：\n\n![支付宝雪碧图修改版效果](\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F18.png)\n\n至此问题解决。\n\n> 注：之所以会采用这样一种结构的按钮，是因为它可以根据文字长度进行自适应，`background-position`的`x`值取`right`即可保证雪碧图是始终靠按钮右边对齐的。而修改版中改变雪碧图结构后，则需要手工指定`background-position`的`x`值。\n\n> 一种更好的解决方案则是直接使用CSS3来写按钮，在IE下进行降级。\n\n## 结\n\n这应该是博客中图片最多的一篇了，关注的也是一个非常非常非常小的点，起因只是因为支付宝的按钮在我发现这个问题一年后仍然没有改过，于是忍不住研究了一下这问题到底有多难解决。\n\n最后，根据上述实验和推断过程小结一下在应用雪碧图的过程中值得注意的点：\n\n1. 雪碧图中请给背景留出足够的空间（出血），否则可能导致retina屏下产生毛边（白边）\n2. 雪碧图如果图标排得太过密集，可能导致retina屏下出现“窜色”（与毛边一样，是由于插值导致）\n3. 如果插值区域无法避免，请将它放在图片边缘位置\n\n最后的最后，一句题外话，以上所有现象均可在部分浏览器放大页面时出现（我忘记是什么浏览器了，曾有项目因此被产品经理报bug，最终将所有图标周围留了2px空白解决）。\n","\u002Farticle\u002Fcss_image_sprites_on_retina_screen.html",null,0,"2026-08-28 04:37:17","published","\u003Cp>CSS雪碧图早已经成为前端知识体系中一个必备知识了，时至今日，可能很多人都觉得这一块已经没有什么东西可以再讲了的。但事实上雪碧图一直都可以引出新的话题，比如从最早的连接数和体积的平衡到格式之争到图像摆放位置的策略，再到合并图像的颗粒度，再到内存占用、CPU占用等性能问题……\u003C\u002Fp>\n\u003Cp>没错，今天还要在这一古老的话题上展开，引入一个新的问题，那就是雪碧图在retina屏下存在的问题及应对方案。（值得注意的是，retina屏一般指分辨率为普通屏幕两倍的屏，这样按照普通尺寸开发出来的网站相当于被放大了2倍，会导致图像模糊之类的现象产生，理想的解决方案是为retina专门适配一套皮肤，但本文关注的问题是未适配retina屏幕的网站所出现的问题。）\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>雪碧图本身不是浏览器或者web标准中的技术，因此它的不少细节取决于浏览器的实现，本文中的讨论的内容正是如此，为避免争议，本文所有结论的得出场景限定为Mac OSX 10.9.1、Chrome浏览器V33。是否适用iPhone、iPad等场景未做相应测试。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>无处不在的白边\u003C\u002Fh2>\n\u003Cp>如前文所述，在retina屏上浏览未做专门适配的网站，会出现图像模糊等问题，无法达到最佳效果，但一般情况下，仍然处于可以接受的范围。不过，在某些网站上，却出现了比图像模糊更糟糕的情况：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F1.png\" alt=\"WebQQ在retina屏下出现白边\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F2.png\" alt=\"财付通首页菜单在retina屏下出现白边\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F3.png\" alt=\"支付宝的按钮在retina屏下出现白边\">\u003C\u002Fp>\n\u003Cp>从上面三张图看到，不少的互联网产品在retina屏下都出现了白边。那么这些白边出现的原因是什么呢？通过查看这些出问题的页面，发现存在一个共同点，那就是这些白边所在的地方都使用了背景图，而且都是使用雪碧图合并的。于是问题就浮现出来了，正是由于雪碧图在retina屏上的放大导致了白边的产生。更为技术化的表达则是，\u003Cstrong>图片放大过程中进行了插值运算，导致原来整齐的图片边界混入了插值后模糊的像素\u003C\u002Fstrong>，从而导致原来整齐的边界处出现“白边”。\u003C\u002Fp>\n\u003Cp>打开WebQQ的雪碧图（\u003Ca href=\"http:\u002F\u002F0.web.qstatic.com\u002Fwebqqpic\u002Fpubapps\u002F0\u002F50\u002Fimages\u002Feqq_sprite.gif?t=20111011001\">http:\u002F\u002F0.web.qstatic.com\u002Fwebqqpic\u002Fpubapps\u002F0\u002F50\u002Fimages\u002Feqq_sprite.gif?t=20111011001\u003C\u002Fa>），就可以验证这一结论。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F4.gif\" alt=\"WebQQ雪碧图\">\u003C\u002Fp>\n\u003Cp>如果您在阅读本文时刚好使用的retina屏幕，可能已经能看到图标边上的白边了，为了统一说明，特放上图像编辑软件中局部放大的图片。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F5.png\" alt=\"WebQQ雪碧图局部放大\">\u003C\u002Fp>\n\u003Cp>图中可以看到，边缘是非常整齐的，但我们在retina屏上截到的图却是这样：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F6.png\" alt=\"WebQQ雪碧图局部放大\">\u003C\u002Fp>\n\u003Cp>可以看到，由于retina屏下，图片被强制放大，导致了原本整齐的边界不再整齐，从而使得页面上出现“白边”。\u003C\u002Fp>\n\u003Ch2>真的是因为雪碧图吗\u003C\u002Fh2>\n\u003Cp>至此，我们已经推断出白边是因为图片被放大而导致，那么这跟雪碧图有关系吗？如果不用雪碧图会出现这样的现象么？为了验证这个结论，本文曾一度中断，最终还是拿到了比较令人信服的结果。\u003C\u002Fp>\n\u003Cp>首先，我们准备一张如下的图片：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F7.png\" alt=\"实验用图1\">\u003C\u002Fp>\n\u003Cp>这张图放了四个色块，其中左上和右下的色块有留白。接下来我们在浏览器中打开它，结果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F8.png\" alt=\"实验用图1\">\u003C\u002Fp>\n\u003Cp>可以看到，图片中有颜色交界的地方都有插值运算而导致模糊，但边缘却是清晰的！也就是说，如果没有拼图的话，浏览器是可以处理好图片的边缘的。为了保险起见，接下来又做了一个实验，准备了一张20*20的纯红色图片，并与CSS写的红色背景进行混合，看看是否有“白边”出现。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F9.gif\" alt=\"实验用图2\">\u003C\u002Fp>\n\u003Cp>可以看到，在CSS背景色不断变化的过程中，图片与背景可以完全融合，没有任何奇怪的现象出现。\u003C\u002Fp>\n\u003Cp>至此，我们终于判定，导致“白边”的原因就是因为雪碧图中不同图像之间在拼合后产生了插值而导致边缘部分模糊。\u003C\u002Fp>\n\u003Ch2>解决之道\u003C\u002Fh2>\n\u003Cp>知道了原因就好解决了，既然白边的出现是因为插值，并且这个插值行为不可控，那就只好将插值的部分移出视野之外了。讲人话就是：切图的时候多留点“出血”。\u003C\u002Fp>\n\u003Cp>继续拿WebQQ为例，如上面所说，原文中聊天气泡图标的背景宽度是20px，两边各加1px，总共22px，效果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F10.png\" alt=\"WebQQ图标改进1\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F11.png\" alt=\"WebQQ图标改进1效果\">\u003C\u002Fp>\n\u003Cp>可以看到白边已经减少了不少，但仍然存在。继续在两边各加1px，总共24px，效果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F12.png\" alt=\"WebQQ图标改进2\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F13.png\" alt=\"WebQQ图标改进2效果\">\u003C\u002Fp>\n\u003Cp>至此，问题完美解决，结论是：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>切图时请为图标在各个方向上多留2px空间\u003C\u002Fstrong>，即可保证retina屏下不出现意料之外的毛边（白边）。\u003C\u002Fp>\n\u003Ch2>The End?\u003C\u002Fh2>\n\u003Cp>这就完了？当然没有，还有另外一类案例解决不了，就是开头提到的支付宝的按钮。如果你不记得了，没关系，我再放一次图：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F3.png\" alt=\"支付宝的按钮在retina屏下出现白边\">\u003C\u002Fp>\n\u003Cp>看一下它的雪碧图(\u003Ca href=\"https:\u002F\u002Fi.alipayobjects.com\u002Fe\u002F201204\u002F2vCVR5Bh4d.png\">https:\u002F\u002Fi.alipayobjects.com\u002Fe\u002F201204\u002F2vCVR5Bh4d.png\u003C\u002Fa>)和结构：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F14.png\" alt=\"支付宝按钮雪碧图\">\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F15.png\" alt=\"支付宝按钮结构\">\u003C\u002Fp>\n\u003Cp>可以看出，这个按钮其实是由左边两边拼合而成（分别由内外两层元素组成），白边来自右边的结构。如果把左边的背景屏蔽掉，会看得更清楚：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F16.png\" alt=\"支付宝按钮结构\">\u003C\u002Fp>\n\u003Cp>这种情况下，背景图小于容器本身，因此无法将插值部分排除到视野外，也即上面说的多留2px也无法解决。（事实上左边已经留有N像素了……）那就只好再利用上面在验证是否是雪碧图才有问题时说的另外一个结论了：边缘部分是不会被插值的。\u003C\u002Fp>\n\u003Cp>于是，将这个雪碧图需要插值的部分改到边缘去，如下图（只改了上面的几个）：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F17.png\" alt=\"支付宝雪碧图修改版\">\u003C\u002Fp>\n\u003Cp>效果如下：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F18.png\" alt=\"支付宝雪碧图修改版效果\">\u003C\u002Fp>\n\u003Cp>至此问题解决。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>注：之所以会采用这样一种结构的按钮，是因为它可以根据文字长度进行自适应，\u003Ccode>background-position\u003C\u002Fcode>的\u003Ccode>x\u003C\u002Fcode>值取\u003Ccode>right\u003C\u002Fcode>即可保证雪碧图是始终靠按钮右边对齐的。而修改版中改变雪碧图结构后，则需要手工指定\u003Ccode>background-position\u003C\u002Fcode>的\u003Ccode>x\u003C\u002Fcode>值。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cblockquote>\n\u003Cp>一种更好的解决方案则是直接使用CSS3来写按钮，在IE下进行降级。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>结\u003C\u002Fh2>\n\u003Cp>这应该是博客中图片最多的一篇了，关注的也是一个非常非常非常小的点，起因只是因为支付宝的按钮在我发现这个问题一年后仍然没有改过，于是忍不住研究了一下这问题到底有多难解决。\u003C\u002Fp>\n\u003Cp>最后，根据上述实验和推断过程小结一下在应用雪碧图的过程中值得注意的点：\u003C\u002Fp>\n\u003Col>\n\u003Cli>雪碧图中请给背景留出足够的空间（出血），否则可能导致retina屏下产生毛边（白边）\u003C\u002Fli>\n\u003Cli>雪碧图如果图标排得太过密集，可能导致retina屏下出现“窜色”（与毛边一样，是由于插值导致）\u003C\u002Fli>\n\u003Cli>如果插值区域无法避免，请将它放在图片边缘位置\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>最后的最后，一句题外话，以上所有现象均可在部分浏览器放大页面时出现（我忘记是什么浏览器了，曾有项目因此被产品经理报bug，最终将所有图标周围留了2px空白解决）。\u003C\u002Fp>\n","\u003Cp>CSS雪碧图早已经成为前端知识体系中一个必备知识了，时至今日，可能很多人都觉得这一块已经没有什么东西可以再讲了的。但事实上雪碧图一直都可以引出新的话题，比如从最早的连接数和体积的平衡到格式之争到图像摆放位置的策略，再到合并图像的颗粒度，再到内存占用、CPU占用等性能问题……\u003C\u002Fp>\n\u003Cp>没错，今天还要在这一古老的话题上展开，引入一个新的问题，那就是雪碧图在retina屏下存在的问题及应对方案。（值得注意的是，retina屏一般指分辨率为普通屏幕两倍的屏，这样按照普通尺寸开发出来的网站相当于被放大了2倍，会导致图像模糊之类的现象产生，理想的解决方案是为retina专门适配一套皮肤，但本文关注的问题是未适配retina屏幕的网站所出现的问题。）\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>雪碧图本身不是浏览器或者web标准中的技术，因此它的不少细节取决于浏览器的实现，本文中的讨论的内容正是如此，为避免争议，本文所有结论的得出场景限定为Mac OSX 10.9.1、Chrome浏览器V33。是否适用iPhone、iPad等场景未做相应测试。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>无处不在的白边\u003C\u002Fh2>\n\u003Cp>如前文所述，在retina屏上浏览未做专门适配的网站，会出现图像模糊等问题，无法达到最佳效果，但一般情况下，仍然处于可以接受的范围。不过，在某些网站上，却出现了比图像模糊更糟糕的情况：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F1.png\" alt=\"WebQQ在retina屏下出现白边\">\u003C\u002Fp>\n","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fcss_image_sprites_on_retina_screen\u002F1.png",{"total":24,"totalRoots":25,"comments":26,"pv":17},16,8,[27,35,41,47,51,57,63,69,73,79,83,87,91,95,101,107],{"id":28,"content":29,"user_id":30,"nick":31,"link":32,"date":33,"rid":17,"vote_up":17,"vote_down":17,"visible":34},109,"\u003Cp>好文，学习了，赞。\u003C\u002Fp>",56,"yiyaxueyu","","2014-03-19 06:07:40",true,{"id":36,"content":37,"user_id":38,"nick":39,"link":32,"date":40,"rid":17,"vote_up":17,"vote_down":17,"visible":34},110,"\u003Cp>看似简单的双倍尺寸切图，居然也会有 BUG，分析的很深入，超赞\u003C\u002Fp>",57,"Jiangshui Yu","2014-03-19 06:13:44",{"id":42,"content":43,"user_id":44,"nick":45,"link":32,"date":46,"rid":36,"vote_up":17,"vote_down":17,"visible":34},111,"\u003Cp>如果是双倍图的话是不会有Bug的，因为和屏蔽像素是1比1，不需要缩放。文中说的是1x的图当2x用，因为要放大2倍，所以就有问题了。\u003C\u002Fp>",2,"TooBug","2014-03-19 06:20:34",{"id":48,"content":49,"user_id":38,"nick":39,"link":32,"date":50,"rid":42,"vote_up":17,"vote_down":17,"visible":34},112,"\u003Cp>恩恩，之前处理的 retina 都直接切双倍图了，所以没有注意这里的 retina 屏幕对单倍放大的 BUG。想表达这意思，表达错了。。\u003C\u002Fp>","2014-03-19 06:50:11",{"id":52,"content":53,"user_id":54,"nick":55,"link":32,"date":56,"rid":17,"vote_up":17,"vote_down":17,"visible":34},113,"\u003Cp>赞！\u003C\u002Fp>",58,"useLess","2014-03-19 10:22:08",{"id":58,"content":59,"user_id":60,"nick":61,"link":32,"date":62,"rid":17,"vote_up":17,"vote_down":17,"visible":34},114,"\u003Cp>好文！\u003C\u002Fp>",59,"Keystion","2014-03-20 01:28:08",{"id":64,"content":65,"user_id":66,"nick":67,"link":32,"date":68,"rid":17,"vote_up":17,"vote_down":17,"visible":34},115,"\u003Cp>赞～！其实支付宝按钮那可以不挪动图的位置，把按钮的padding-right值减少两个像素避开图的边缘就可。\u003C\u002Fp>",60,"aiyoo","2014-03-20 02:53:21",{"id":70,"content":71,"user_id":44,"nick":45,"link":32,"date":72,"rid":64,"vote_up":17,"vote_down":17,"visible":34},116,"\u003Cp>求详解？貌似避不开呀，左右两部分一定会有重叠的部分，而且左边的背景图无限长之后，右边的背景图必须短，否则会遮住左侧边框，就无法起到拼合的作用了。\u003C\u002Fp>","2014-03-20 05:16:57",{"id":74,"content":75,"user_id":76,"nick":77,"link":32,"date":78,"rid":17,"vote_up":17,"vote_down":17,"visible":34},117,"\u003Cp>赞 今天刚遇到了。话说mac的safari会没事\u003C\u002Fp>",61,"tq","2014-03-20 13:57:37",{"id":80,"content":81,"user_id":66,"nick":67,"link":32,"date":82,"rid":70,"vote_up":17,"vote_down":17,"visible":34},118,"\u003Cp>我看了一下其实要把居右的小图写在a上，把长图写在span上，这样显示白线的小图被大图压着，就看不到了，呵呵～\u003C\u002Fp>","2014-03-20 14:37:51",{"id":84,"content":85,"user_id":44,"nick":45,"link":32,"date":86,"rid":80,"vote_up":17,"vote_down":17,"visible":34},119,"\u003Cp>好像有点道理，待确认。如果左半部分放在上面，不会压住右半部分的右边框么？\u003C\u002Fp>","2014-03-20 22:29:45",{"id":88,"content":89,"user_id":44,"nick":45,"link":32,"date":90,"rid":74,"vote_up":17,"vote_down":17,"visible":34},120,"\u003Cp>所以说跟浏览器的具体实现有关。\u003C\u002Fp>","2014-03-20 22:30:03",{"id":92,"content":93,"user_id":66,"nick":67,"link":32,"date":94,"rid":84,"vote_up":17,"vote_down":17,"visible":34},121,"\u003Cp>我试了一下可行，也只能是曲线救国吧。内层元素的背景压住父层元素的背景图\u003C\u002Fp>","2014-03-21 03:13:23",{"id":96,"content":97,"user_id":98,"nick":99,"link":32,"date":100,"rid":17,"vote_up":17,"vote_down":17,"visible":34},122,"\u003Cp>非常不错，very nice！\u003C\u002Fp>",62,"jonny","2014-05-21 08:10:04",{"id":102,"content":103,"user_id":104,"nick":105,"link":32,"date":106,"rid":17,"vote_up":17,"vote_down":17,"visible":34},123,"\u003Cp>过来膜拜~\u003C\u002Fp>",63,"skpping","2014-11-20 06:34:41",{"id":108,"content":109,"user_id":44,"nick":45,"link":32,"date":110,"rid":102,"vote_up":17,"vote_down":17,"visible":34},124,"\u003Cp>什么情况？！\u003C\u002Fp>","2014-11-20 08:36:59"]