0

ここにページがあります: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/

ブラウザのサイズを変更しても、Chrome では見栄えがよく、すべてが見栄えがします。ただし、Firefox では、列が互いに重なり合い、画像のサイズが変更されません。

主なグリッド クラスは、.c-1 (幅の狭い列) と .c-2 (2 つの .c-1 列の幅) です。この問題を引き起こすために私のコードで何が起こっているのですか?

クイック リファレンスとして、グリッドに CSS3box-sizing: border-boxを使用しています。.c-1 および .c-2 クラスのコードは次のとおりです。

.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}

.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}

.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }

レスポンシブ画像には次のコードも使用しています。

img { 
border: 0; 
-ms-interpolation-mode: bicubic; 
vertical-align: middle; 
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}

編集わかりましたほとんどのセクションのレスポンシブ画像を修正したようです。.active のクラス名に幅の値がありませんでしたが、まだブログ セクションに問題があります。そのページでは同じレイアウトが使用されていますが (.c-1 と .c-2 を一緒にインラインで)、このセクションは互いに重なっているように見えます...奇妙なことです!

4

1 に答える 1

0

これらの要素に幅が指定されていない場合、Firefox は要素の幅の計算を好まないようです。これがレスポンシブ イメージが機能しない理由を説明しています。max-width に設定された画像には、幅が設定されたコンテナーが必要です。そうしないと、画像はスケーリングされません。

CSSで幅が指定されていない場合、ブラウザは要素をデフォルトで100％幅にすると思いましたか？

とにかく、すべてが修正されました。ラッパーの人々に幅を持たせてください！

于 2012-12-21T11:22:35.873 に答える