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

Question

我有sample page here

正如你所看到的那样，4-up行中的“食谱制作者”和“视频”图像溢出了他们的父母。

在标准的Zurb Foundation 3“block-grid”中，因此设置为最大宽度100％。没有顶部橙色条的所有图像都可以正常工作。

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

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

Answer 1

为标注添加最大宽度可以修复它。没有它，图像变得太宽了：

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

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