html - Firefox 不正确地呈现 CSS（间距不同）

Question

目前我正在使用 Concrete5 建立一个网站，位于：http: //tinyurl.com/cee5rvo

Firefox 将标题（导航和 h1 标签）向下推到某些页面（例如图库）上，我不知道为什么。

Chrome 和 IE10 都可以正常显示。

谢谢你的帮助。

Answer 1

您在 div #asmillerGalleryBlock... 上有 10 像素的边距...将其设置为边距：0 auto;

Answer 2

由于浮动问题，您的元素没有正确占用空间。将此添加到您的 CSS：#content {float:left}

Answer 3

我认为您的问题与您如何浮动元素有关。

如果你nav-selected nav-path-selected在你的导航中检查，你会看到它的计算高度是 0px。

这是由浮动元素不强制其父容器自动调整大小引起的一个非常常见的问题。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。由于浏览器以不同的方式处理这个问题，一个常见的解决方案是使用“clearfix”。

如果将以下内容添加到全局 css...

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}



html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

并将 clearfix 添加到高度为 0px 的元素（例如 nav-selected），您将看到该元素继承了正确的高度。

Answer 4

处理此问题的最佳方法是在#content div 中添加一行。

#content {
    overflow: hidden;
    width: 800px;
}

隐藏的溢出将清除浮动并停止将内容向下推的不良影响。