html - 导航在 Firefox 中显示略有不同

Question

在我工作的网站上，我在主要浏览器(检查 Chrome、Safari 和 Firefox)上看到的一切看起来都差不多。

除了导航元素上令人讨厌的 1 像素间隙外，所有这些间隙在事件元素(当背景被填充时)上很明显。

您可以在这里访问网站:http://lumbre.breadadams.com/

这就是我说的差距

我搞砸了 height、line-height、padding 等多个元素(nav、ul 等) , 但似乎没有任何办法。

但是，如果我将 font-size 从 1.2em 增加到 1.3em 它适合，但它不适合 Chrome。一次增加字体 0.1 基本上可以在 Chrome 和 Firefox 之间切换。

Answer 1

#navigation-container #main-nav ul > li.menu-item-has-children > a::after {
    content: "";
    font-family: FontAwesome;
    margin-left: 4px;
    position: absolute;
}

这是你的答案 friend !

只需添加一个position: absolute;

:after(小图标)需要绝对位置。它造成了一点上层空间，但是当你给它一个绝对位置时，一切都很好我的 friend !