在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