浏览器之间的视觉差异

Question

为什么我会得到不同的菜单！？我不希望它看起来像在Firefox中，但尽管我改变了CSS，我无法完美。我有什么想法可以解决这个问题吗？

Firefox中的

菜单：这是我想摆脱蓝色区域底部的重叠部分。

菜单i Chrome，Safari和IE：

CSS：

.menuContainer
{
height: 60px;
width: 100%;
background: #C9C9C9;
}

.mainMenu
{
margin: 0 auto;
width: 60%;
}

.mainMenu nav
{
margin: 15px 0 0 0;
padding: 0;
height: 40px;
float: left;
background: #C9C9C9;
}

.mainMenu nav ul
{
list-style: none;
padding-left:  0px;
margin: 0;
}

.mainMenu nav ul li
{
float: left;
display: inline;
}

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

/* highlight menu alt 1 */ 
body#hem a#hem-link,
body#karta a#karta-link,
body#byggnad a#byggnad-link,
body#byggnader a#byggnader-link,
body#tips a#tips-link,
body#info a#info-link,
body#omguiden a#omguiden-link,
body#kopenhamn a#kopenhamn-link {
background: #00B4FF;
}

HTML：

<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>

Answer 1

不依赖于导入字体的默认值 - 尺寸和行高可能与'web-safe'字体不一样

Allwayssætline-height的值 - 浏览器以不同的方式呈现行高。可能只有几个像素，但可能是一个问题

.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;
}