css - 使用 css 生成的内容包装时图像太大

Question

我这里有一个示例页面

如您所见，那 4 行中的“食谱制造商”和“视频”图像溢出了它们的父项。

它们位于标准的 Zurb Foundation 3“块网格”中，因此设置为最大宽度 100%。所有没有顶部橙色条的图像都可以正常工作。

此外，整个设置在 Webkit 浏览器（Chrome 26、Safari 6、iOS）中运行良好：它在 FF (21) 或 IE (10) 中不起作用。

如果我从标注中删除显示内联块，图像大小会恢复正常，但我需要橙色框文本位于顶部，就像在 Webkit 中一样。

Answer 1

向标注添加 max-width 可以修复它。否则，图像变得太宽：

.callout { 
    display: inline-block;
    max-width: 100%;
    position: relative;
}

这也在 Opera 中修复了它，因为它最初只适用于 WebKit 浏览器。