带有1x1px透明spacer的CSS图像精灵在Chrome中不起作用

Question

使用图片精灵，不是问题，多年来一直在做。但我刚刚注意到，当使用“img”标签时，他们已停止使用chrome，其中“src”引用了1x1px透明gif（spacer）。

我使用这个spacer /方法，以便我仍然可以为屏幕阅读器等提供替代文字。仅使用div或span标签不是一个选项，我需要使用图像标记。

精灵的CSS示例：

.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}

html的示例实现：

<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>

我知道这一切都运行良好（路径没有错等），因为它适用于所有其他浏览器，但在Chrome中没有显示任何内容，就像它看到1x1px“d.gif”并将其用作图像，但从CSS中获取精灵的宽度/高度（使用chrome检查器）。同样使用chrome中的检查器我可以看到它有精灵图像，它被加载，它只是被1x1px gif取代。

实时网址示例：goo.gl/1c9nIF

• RHS列的顶部缺少“打印”图标
• 在谷歌地图上方，“其他有趣的网页 - 你下一步会看到什么”框中充满了空白的图片
• 页脚意味着有4个“跟随我们”圆形社交图标
• 等

让我疯了，我的实况网站上有空的css精灵插槽......不是我想在星期六早上看到的： - （

有人对此有所了解吗？我已经检查了三台不同的计算机，清理了缓存等，看起来像是坏了......

Answer 1

问题似乎是你的形象。我不确定原因，但是当我用https://pingviin.org/images/flags/blank.gif替换您的图片src时，它会按预期工作。也许你用来创建gif的东西上面放了一些奇怪的meta标签？