为什么我的响应布局坏了？

Question

这是页面：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;
}

编辑 Ok我现在似乎已经修复了大多数部分的响应图像。.active的一个类名丢失了一个宽度值，但是我在博客部分仍然有一个疯狂的问题。尽管在该页面上使用了相同的布局(.C1和.c-2内联在一起)，但这一节似乎重叠了一个another...odd！

Answer 1

好吧，当这些元素没有指定的宽度时，Firefox似乎不喜欢计算元素的宽度，这解释了为什么响应的图像不能工作。设置为最大宽度的图像必须有一个具有设置宽度的容器，否则图像不会缩放。

我认为浏览器默认元素为100%宽度，如果CSS中没有指定宽度？

不管怎样，现在都修好了。把宽度放在你的包装纸上，人们！