渲染不同的chrome和firefox

Question

我刚刚完成一个导航栏，但奇怪的是我不知道为什么，它在firefox和chrome上的呈现方式不同。

我会告诉你差异，你知道这可能来自哪里吗？

Chrome（normale）：

Firefox和IE：

作为一个提示（可能），我使用了table，table-row和table-cell，但如果我玩它，我看不到任何相关的变化。

如果你想自己做一个想法，这里是网站的链接：origin 这里有一个链接到导航器的小提琴：JsFiddle

我还是跨浏览器开发的新手，所以如果有人给我一个提示..？

Answer 1

在我看来，由于字体渲染中的像素差异很小，因此浮动在某些浏览器中无法正常清除。

尝试将clear:both添加到导航栏。这应该强制它清除所有花车。

Answer 2

您可以选择其中一个选项来解决问题。

将overflow: hidden;添加到#header。

将float:left;添加到#main-menu

将clear:both添加到#main-menu