0

ここにサンプルページがあります

ご覧のとおり、その 4 アップ行の「レシピ メーカー」と「ビデオ」の画像は、親をオーバーフローしています。

これらは標準の Zurb Foundation 3 の「ブロック グリッド」にあり、最大幅 100% に設定されています。上部にオレンジ色のバーがないすべての画像は正常に機能します。

また、この設定全体は Webkit ブラウザー (Chrome 26、Safari 6、iOS) で正常に動作します。FF (21) または IE (10) では動作しません。

コールアウトから表示インライン ブロックを削除すると、画像サイズは通常に戻りますが、Webkit のように、オレンジ色のボックス テキストを上部に配置する必要があります。

4

1 に答える 1

0

吹き出しに max-width を追加すると修正されます。そうしないと、画像が広すぎます。

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

もともと WebKit ブラウザでしか動作しないため、Opera でも修正されます。

于 2013-05-15T19:51:51.057 に答える