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 实际上是正确的。您需要重新调整 Chrome 样式，使其统一。