Html 浏览器之间的视觉差异

为什么我会有不同的菜单！？我不想让它看起来像Firefox中的一样，但尽管我在CSS中做了一些更改，但我无法让它变得完美。我能做些什么来解决这个问题

Firefox中的菜单：我想去掉蓝色区域底部的重叠部分

菜单i Chrome、Safari和IE：

CSS:

HTML:

不要依赖导入字体的默认值-大小和线条高度可能与“web安全”字体不同

Allways sæt线高度值-浏览器以不同方式渲染线高度。也许只有几个像素，但可能是个问题

.mainMenu nav ul li a  {
line-height: 1.2;
color: #fff;
padding: 19px 10px 19px 10px;
margin: 0 20px 0 0;
font-family: 'Montserrat',serif;
font-size: 18px;
font-weight: bold;
}

---

请同时提供HTML。别让我们猜。我试过了，但我不能像“HTML”代码那样粘贴它！怎么做？粘贴它，然后突出显示它并单击{}按钮。或者制作一个js Fiddle也许你的chrome是旧版本，而你的firefox是更早的版本DLooks像你一样没有发布所有内容，因为我甚至无法复制样式：。使用arial或verdana字体会更好吗？你的解决方案不起作用，我在上面有一行，而不是处理行高-现在看起来是同一个交叉行了？不需要显示：我想是内联的！？无论如何-在li a中添加li的高度和线条高度，您应该可以

<div class="menuContainer">
<div class="mainMenu">
<nav>
<ul>
<li><a  id="hem-link" href="?p=hem">Hem</a></li>
<li><a  id="kopenhamn-link" href="?p=kopenhamn">Köpenhamn</a></li>
<li><a  id="karta-link" href="?p=karta">Karta</a></li>
<li><a  id="byggnader-link" href="?p=byggnader">Bilder</a></li>
<li><a  id="tips-link" href="?p=tips">Tips</a></li>
<li><a  id="omguiden-link" href="?p=om-guiden">Om guiden</a></li>
</ul>
</nav>
</div>
</div>

.mainMenu nav ul li a  {
line-height: 1.2;
color: #fff;
padding: 19px 10px 19px 10px;
margin: 0 20px 0 0;
font-family: 'Montserrat',serif;
font-size: 18px;
font-weight: bold;
}