在Chrome瀏覽器但不是Firefox的響應式圖像

我正在使用響應式圖像和一對固定側邊欄（首次嘗試響應式設計）的網站上工作。問題：響應式圖像在Chrome中按預期工作，但它們在Firefox中完全不工作。這裏是有問題的頁面的例子：在Chrome瀏覽器但不是Firefox的響應式圖像

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

任何想法，爲什麼這種差異？

注意：當瀏覽器超過1000像素時，響應圖像不起作用。當事情調整爲平板電腦/手機大小的屏幕時，他們實際上按預期工作。

2012-11-17 Adam Pash

我看了一下，在Firefox方面我建議你刪除你的顯示器：inline-block和float：left;當您的瀏覽器窗口到達時將重新調整爲更大的屏幕尺寸（例如您在問題中提到的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 screen of page after float and display are removed on large screen.

希望幫助

來源

2012-11-17 04:44:06 koramaiku

非常感謝，它做到了！浮動肯定是問題。我不需要介紹寬度：80％;只是擺脫浮動允許容器適合視口的剩餘寬度。 –

:)甜香蕉 – koramaiku

添加<meta name="viewport" content="width=device-width, initial-scale=1.0">在HTML的標題。這將有助於根據屏幕大小調整頁面大小。

來源

2016-06-28 05:28:21

在Chrome瀏覽器但不是Firefox的響應式圖像

回答

相關問題