在Chrome和Firefox中呈现不同

Question

我刚刚完成了一个导航栏，但奇怪的是，我不明白为什么，它在Firefox和chrome上无法呈现相同的效果。

我将告诉您其中的区别，您是否知道其中的来源？

镀铬（普通）

Firefox和IE：

作为提示（可能），我使用适当table ， table-row和table-cell但是如果我玩的话，则看不到任何相关变化。

如果您想自己做一个主意，这是网站链接： origin只是导航器，这是小提琴的链接： JsFiddle

我仍然是跨浏览器开发的新手，所以如果有人对我有提示。

Answer 1

在我看来，由于字体渲染中的微小像素差异，浮点数在某些浏览器中无法正确清除。

尝试在您的导航栏中添加clear:both 。 这将强制其清除所有浮标。

Answer 2

您可以选择以下选项之一来解决问题。

添加overflow: hidden; 到#header 。

添加float:left; 进入#main-menu

在#main-menu添加clear:both