Safari 图像渲染错误答案

【问题标题】：Safari image rendering bugSafari 图像渲染错误
【发布时间】：2010-10-29 15:35:31
【问题描述】：

有没有其他人遇到过这种情况。每当浏览器最初加载图像时，它只显示图像的后半部分。然后，当我将鼠标悬停在绿色部分的任何位置时，它会立即显示图像的其余部分。

您在这里看到的是带有背景图像的<div> 和位于上述<div> 中的<img>。

我在使用适用于 Windows 的 Safari 3.2.3 时遇到了这个问题，我的同事在使用 Mac 版本时也看到了这个问题。我测试过的其他浏览器似乎都没有显示相同的错误。我在 IE8、IE7、IE6、FF3、Chrome 和 Opera 中测试过。

如果您听说过任何修复，请告诉我。谢谢。

Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg

【问题讨论】：

尝试在bugs.webkit.org发布错误报告
您能否在 Safari Web Inspector 中查看这些元素，看看它们应用了哪些样式？
如果没有看到代码，就无法判断这是 Safary 中的错误还是（更可能的情况）您的代码中的错误。

标签： html css browser image safari

【解决方案1】：

我已经看到与 IE 渲染类似的问题，通过将 height: 1% 设置为受影响的 div 或嵌套在其中的元素来解决。不过，我从未在 Safari 中见过它。

【讨论】：

是的，我过去也解决了这个问题。谢谢。

【解决方案2】：

在 Firebug 中检查图像附近的所有元素（是的，我知道问题出在 Safari 中），并确保它们都没有因任何原因的尺寸错误，并且它们都没有过多的填充来侵占您的图像'没有正确看到。另外，尝试在附近的各种元素的样式上设置overflow: visible;；我过去曾看到过鼠标悬停闪烁，但没有什么是 CSS 无法克服的。

【讨论】：

谢谢。我们重构并解决了这个问题。仍然不知道为什么在 safari 中这样做。我会采纳你的建议并在旧代码中使用它。我会让你知道什么有效，什么无效。再次感谢。

【解决方案3】：

如果是 GIFS，请尝试使用 PNG

【讨论】：