0

这是页面：http ://www.thresholds.org.uk/museums-collections-poets/kettles-yard/

即使您调整浏览器大小，它在 Chrome 中看起来也很棒，一切看起来都很棒。但是，在 Firefox 中，列相互重叠并且图像不会调整大小。

主要的网格类是 .c-1（宽度较小的列）和 .c-2（两个 .c-1 列的宽度）。我的代码中发生了什么导致此问题？

为了快速参考，我在box-sizing: border-box网格中使用 CSS3，这是我的 .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 回答