火狐呈现CSS错误（间距变化）

目前我使用Concrete5建立一个网站，设在这里：http://tinyurl.com/cee5rvo 火狐呈现CSS错误（间距变化）

火狐推头（导航和h1标签）倒在某些页面（如图库）和我不知道为什么。

Chrome和IE10都能正确显示。

感谢您的任何帮助。

来源

2013-05-13 HedgepigMatt

什么是你的CSS和HTML？你有没有试过，top：0;填充，边距0？也许把它放在一个jsfiddle显示你的问题 – DiederikEEn 2013-05-13 09:52:34

你使用的是哪个版本的FF？在我的FF上看不到任何东西。 – Nitesh 2013-05-13 09:58:40

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

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

隐藏的溢出将清除浮动并停止推送内容的不良后果。

来源

2013-05-13 10:32:40

感谢您的回复，因为我的电脑被挤掉了，所以无法对它进行测试，但会尝试两种提到的解决方案机会 – HedgepigMatt 2013-05-13 13:14:28

祝你好运！ – 2013-05-14 15:51:16

谢谢，我实际上并没有移动，但从夏季开始回到Uni的家中 – HedgepigMatt 2013-05-15 08:26:39

你在div #asmillerGalleryBlock上有10px的边距...设置为margin：0 auto;

来源

2013-05-13 09:54:19 Rhyso

啊，是的，那是因为我试图通过根据他们在哪个页面手动对齐来解决问题。然后，我意识到，它只是Firefox，所以我删除了所有这些黑客，不小心将其中一个插入。 – HedgepigMatt 2013-05-13 13:13:39

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

来源

2013-05-13 09:55:11 Deadkat7

我认为您的问题是如何处理浮动元素。

如果您在导航中检查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与0像素高度的元素（如导航选择），你会看到的元素继承了正确的高度。

来源

2013-05-13 10:10:00

火狐呈现CSS错误（间距变化）

回答

相关问题