css - Safari 5 中的图像消失

Question

编辑：

如果我删除

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

它按预期工作。对此有什么好的解释吗？float:left 有什么替代方案吗？（桌子除外）

工作示例（非浮动容器）：http: //jsfiddle.net/Kju6z/5/

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

---

如果您可以运行 safari 5.1（通过http://browserstack.com或类似网站） - 请检查一下。我不确定这是什么原因。

http://jsfiddle.net/Kju6z/

.box-media-box .box-media-link {
max-width:75px;
width:auto;
height:auto;
} 

.box-media img {
max-width:100%;
height:auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
overflow:hidden;
}

浮动图像宽度事先不知道，但图像容器的最大宽度设置为 75 像素（请注意，在这种情况下，我知道图像实际上是 100 像素 - 但这只是示例）。

图像本身的最大宽度为 100%，高度为自动，因此它是响应式的。

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

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

Answer 1

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

waitForImages 插件的自定义也是在缓存图像上触发 eachCallback，以便它们也可以显示图像。

https://github.com/alexanderdickson/waitForImages

Answer 2

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

下面是一个demo，我只在图片上加了height="2"，在safari下就可以了。

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

jsFiddle

Answer 3

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

这有帮助。

在这里查看： https ://developer.mozilla.org/en-US/docs/Web/CSS/max-width