Firefox中的CSS渲染问题

Question

在我过去几个月教自己编写代码之后，我正准备结束我的第一个主要Web开发项目。但是，我仍然在努力解决它看起来的几个基本问​​题。

我在Firefox上的页面加载方式与在Safari或Chrome中完全不同。

你可以在这里看到我所指的页面的一个例子：http://fmhgifts.com/home-office/但我也提供了一些屏幕截图来说明我的意思。首先，它在Chrome中正确显示： 然后这里是它在Firefox中呈现的完全相同的页面：

我花了一些时间尝试使用Web开发工具栏来诊断问题，但到目前为止还没有这样做。如果有经验的人能够帮助我，我会非常感激。

Answer 1

问题是您正在使用-webkit-transform，它专门用于基于webkit的浏览器（Firefox不使用webkit，Internet Explorer也不使用）。有许多方法可以在没有-webkit-transform的情况下实现网格。您似乎已经使用了这样一种方式：top和left CSS属性（还有bottom和right属性）。和那些人一起玩。

Answer 2

尝试从

中删除float:left

#filter-bar {
    float: left;
    margin-bottom: 35px;
}

休息我觉得它会自己照顾。试试让我知道。因为它是一个漂浮的元素，所以其他div被推高而不是被击倒。从这个意义上讲，Firefox实际上是对的。你需要重新调整镀铬造型，使其适合所有人。