在Safari中消失的图像5

如果我删除

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

它按预期工作。这有什么好的解释吗？有没有其他的选择float：left？（除了表）

工作实施例（非液浮容器）：http://jsfiddle.net/Kju6z/5/

（编辑2：即使不是这种圣杯，在更先进的实施例中 - 这仍然失败，即使没有浮动）。

如果你能5.1（通过http://browserstack.com或类似）运行的Safari浏览器 - 请检查了这一点。我不确定这是什么原因。

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; 
}

的浮动图像宽度是事先不知道，但图像容器具有最大宽度设定960x75像素（注意，在这种情况下，我不知道该图像是实际上100px的 - 但这只是例子）。

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

这似乎适用于除Safari浏览器以外的所有浏览器，这个甚至不显示图像。它有时会这样做，这让我觉得这个问题可能是由于图像还没有被加载，而CSS被解释，这可能是什么原因？

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

enter image description here

来源

2013-09-25 Wesley

如果图像尺寸是未知的，因为它是动态生成的内容的一部分，是不是你能够提供尺寸动态呢？ – cimmanon

@cimmanon - 不，这些是来自facebook api的结果 - 他们确实有一些图片，他们允许您控制大小，但不是我需要的大小。 – Wesley

仅仅因为FB API没有明确提供图片尺寸，并不意味着您*无法*获取它们（请参阅：http://stackoverflow.com/a/626505/1652962）。 – cimmanon

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

这帮助。

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

来源

2013-10-15 18:42:50

您可以添加一些随机高度属性的图像（因为在CSS你正在它再次自动）。

这里是一个演示，其中我只将高度=“2”添加到图像中，并且在safari下可以。

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

jsFiddle

来源

2013-09-25 19:45:18 drip

谢谢，但不幸的是这不起作用。它只在第二次加载页面时起作用 - 因此在加载图像之后。如果您完全关闭并重新打开浏览器，则会在第一页加载时看到图像尺寸不合适。 – Wesley

是的，你说得对。那么如何删除箱子大小的属性，并使最大宽度在97-98％左右;因为看起来，那是什么让safari失败？ – drip

实际上它是浮动：左侧使其失败（或框的大小） - 但我真的需要框的大小来使东西工作，看到我更新的消息。 – Wesley

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

waitForImages插件的自定义也是为缓存的图片启动eachCallback，以便它们也可以显示图片。

https://github.com/alexanderdickson/waitForImages

来源

2013-09-26 15:33:40 Wesley

在Safari中消失的图像5

回答

相关问题