Css safari 5中消失的图像

编辑：

如果我删除

.box-media-link-container {
float:left;
}

它按预期工作。对此有什么好的解释吗？浮动是否有其他选择：左？（表格除外）

工作示例（非浮动容器）：

（编辑2：在更高级的示例中，即使这不是圣杯——即使没有浮动，这仍然失败）

---

如果您可以运行safari 5.1（通过或类似方式）-请查看此项。我不知道这是什么原因了

浮动图像宽度事先不知道，但图像容器的最大宽度设置为75px（注意，在本例中，我确实知道图像实际上是100px，但这只是示例）

图像本身的最大宽度为100%，高度为auto，因此响应迅速

这似乎适用于除safari之外的所有浏览器，这个浏览器甚至不显示图像。虽然有时会这样做，这让我认为问题可能是由于在解释CSS时图像尚未加载造成的，是吗

请参阅随附的屏幕截图，了解Safari 5.1中的外观（黑色边框的小圆圈应该包含图像）。看起来好像图像尚未加载（因为没有设置宽度或高度），但图像从未加载。只有当您转到inspect元素时，它要么立即弹出，要么在您更改任何一个属性后弹出

---

您可以向图像添加一些随机高度属性（因为在css中，您再次将其设置为自动）

这是一个演示，我只在图片中添加了height=“2”，在safari下就可以了

<img class="box-picture" src="http://placehold.it/100x100/cccccc/ffffff&amp;text=thumb" height="2" />

---

嗯，我使用了一个自定义版本的waitForImages插件来检查每个图像并查看是否已加载。在加载之前，它是隐藏的，没有float:left-加载之后，添加float:left并显示它。这似乎解决了问题

waitForImages插件的定制还可以在缓存的图像上触发eachCallback，以便它们也可以显示图像

这有帮助

请点击此处：

---

谢谢，但不幸的是，这不起作用。它只在第二次加载页面时起作用，所以在加载图像之后。如果你完全关闭并重新打开浏览器，你会发现在加载第一页时，图像的大小不合适。是的，你是对的。好的，那么去掉盒子的尺寸属性，使最大宽度在97-98%左右怎么样；看起来，这就是safari失败的原因？事实上，是浮动：左使其失败（即框大小）-但我真的需要框大小使其工作，请参阅我的最新消息。我认为你可以实现相同的事情，如：（没有框大小），不完美，但似乎它工作。至少在我这方面-清理了我的safari缓存几次。xdI需要它在各种不同的配置（填充大小、边框大小、圆度等）下工作-因此我认为您的90%解决方案在这种情况下不起作用。如果图像尺寸未知，因为它是动态生成内容的一部分，您不能动态提供尺寸吗？@cimmanon-否，这些是facebook api的结果-它们确实有一些图片可以让你控制大小，但不是我需要的图片。仅仅因为FB api没有明确提供图片尺寸并不意味着你无法获取它们（请参见：）。@这只是我的问题，这些图像甚至没有显示正确的大小——所以我应该如何通过javascript获得它。我想我可以先复制图像并通过javascript加载，但这会使事情变得复杂，而且仍然有某些浏览器版本无法正确发送图像完成事件。

<img class="box-picture" src="http://placehold.it/100x100/cccccc/ffffff&amp;text=thumb" height="2" />

max-width: intrinsic;
max-width: -moz-max-content;
max-width: 100%;