2

レスポンシブ画像といくつかの固定サイドバーを使用する Web サイトに取り組んでいます (レスポンシブ デザインの最初の試み)。問題: レスポンシブ イメージは Chrome では期待どおりに機能しますが、Firefox ではまったく機能しません。問題のページの例を次に示します。

http://ellenflaherty.com/projects/carland/

なぜ不一致なのか分かりますか？

注: ブラウザーが 1000px を超えると、レスポンシブ イメージが機能しません。タブレット/電話サイズの画面に合わせて調整すると、実際には期待どおりに機能します。

4

2 に答える 2

1

私は見てきましたが、Firefoxに関しては、ディスプレイを削除することをお勧めします。インラインブロックとフロート：左。ブラウザウィンドウが到達すると、質問で言及した1000pxのように、より大きな画面サイズにサイズ変更されます。次に、より小さな画面サイズの場合は、ディスプレイを再導入してフロートし、ページが正しく表示されるようにします。

大画面でディスプレイとフロートを外した後のコードの下に画像を添付しています。

.projectimg {
    bottom: 0;
    /* display: inline-block;  REMOVE THIS */
    /* float: left; /* REMOVE THIS */
    height: auto;
    margin-left: 220px;
    margin-right: 30px;
    overflow: hidden;
    width: 80%; /* THIS */
}

大画面でフロートと表示後のページのFirefox画面が削除されます。

お役に立てば幸い

于 2012-11-17T04:44:06.940 に答える