html - 浏览器之间的视觉差异

Question

为什么我得到不同的菜单!？我不希望它看起来像在 Firefox 中那样，但尽管我更改了 CSS，但我无法使其完美。我可以做些什么来解决这个问题？

Firefox 中的菜单:这是我要去掉的蓝色区域底部的重叠部分。

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

不要依赖导入字体的默认值 - 大小和行高可能与“网络安全”字体不同

始终设置行高的值 - 浏览器以不同方式呈现行高。可能只有几个像素，但可能是个问题

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