爲什麼我的響應式佈局被破壞？

這是網頁：http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/爲什麼我的響應式佈局被破壞？

即使調整瀏覽器大小，Chrome瀏覽器看起來也很棒，一切看起來都很棒。但是，在Firefox中，列彼此重疊，圖像不能調整大小。

主要網格類是.C-1（小寬度列）和.C-2（二.C-1列的寬度）。我的代碼中發生了什麼事情導致此問題？

對於快速參考，我使用CSS3 box-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的類名缺少寬度值，但我仍然對Blog部分有一個瘋狂的問題。即使在該頁面上使用了相同的佈局（.c-1和.c-2內聯在一起），此部分似乎彼此重疊......奇怪！

來源

2012-12-21 egr103

你好，請閱讀我的網站不能正常工作[東西。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/q/125997）謝謝！ –

我已經添加了@Pekka代碼的關鍵位 – egr103

玉以及它似乎Firefox不喜歡計算元素的寬度，當這些元素沒有指定的寬度，這可以解釋爲什麼響應圖像不工作。 設置爲最大寬度的圖像必須具有設置寬度的容器，否則圖像不會縮放。

我認爲瀏覽器默認元到100％的寬度，如果寬度尚未在CSS中指定？

不管怎麼說，現在都固定。把寬度放在你的包裝人員上！

來源

2012-12-21 11:22:35 egr103

爲什麼我的響應式佈局被破壞？

回答

相關問題