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

Question

我有一个 sample page here

如您所见，该 4 行中的“食谱制作者”和“视频”图像溢出了它们的父级。

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

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

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

Answer 1

在标注中添加 max-width 可以修复它。否则图像会变得太宽:

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

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