徒步旅行中消失的图像5

Question

编辑：

如果我删除

.box-media-link-container {
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;
}

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

图像本身的最大宽度为100％，高度为auto，因此它具有响应性。

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

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

Answer 1

好吧，我使用了waitForImages插件的自定义版本来检查每个图像并查看它是否已加载。在它加载之前，它是隐藏的并且没有浮动：左 - 在它加载后浮动：左边被添加并显示它。这似乎解决了这个问题。

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

https://github.com/alexanderdickson/waitForImages

Answer 2

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

这是一个演示，其中我只在图像中添加了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