字体在Chrome和Firefox

Question

在网络开发方面，我有点新鲜。

我创建了一个菜单，但其按钮宽度因浏览器而异（Firefox或Chrome）

在Firefox中，我们可以看到菜单最后一个按钮的结尾与下面的div对齐。我们还可以理解按钮的宽度是136.5px

然而，在Chrome中，字体更大胆，菜单结束有点向前推。这里，按钮的宽度是139.281px

这是网站，菜单位于顶部：http://www.metagame.gg/champions/

这是菜单的HTML和CSS代码

	.navigator {
		margin: 0;
		padding: 0;
		display: flex;    
		padding-left: 39px;
		background: #8C9BAA; 
	}
	.navigator li {
		display: inline-block;
		position: relative;
		z-index:100;	
	}
	.navigator li a {
		text-decoration: none;
		font-size: 15px;
		display: block;
		line-height: 50px;
		padding: 2px 27.75px 0px;
		-webkit-transition: all 0.2s ease-in-out 0s;
		-moz-transition: all 0.2s ease-in-out 0s;
		-o-transition: all 0.2s ease-in-out 0s;
		-ms-transition: all 0.2s ease-in-out 0s;
		transition: all 0.2s ease-in-out 0s;
	}
	.navigator li a:hover, .navigator li:hover > a {
		color:#fff;
		background: #7AAFD1;
	}
	.navigator ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 170px;
		position: absolute;
		left: 0px;
	}
	.navigator ul li {
		display:block;
		float: none;
		background:none;
		margin:0;
		padding:0;
	}
	.navigator ul li a {
		font-size:12px;
		font-weight:bold;
		display:block;
		color:#797979;
		border-left: 3px solid #ffffff;
		background: #fff;
		line-height: 42px;
		transition: 0s;
	}
	.navigator ul li a:hover, .menu ul li:hover > a {
		background:#EFEFEF;
		border-left:3px solid #83BEE4;
		color: #12303D;
	}
	.navigator li:hover > ul {
		display: block;
	}
	.navigator ul ul {
		left: 149px;
		top: 0px;
	}
	#in {
		color:#fff;
		background: #7AAFD1;
	}
	.sub-menu {
		border:1px solid #ddd;
		border-top:0px;
		border-left:0px;
		box-shadow: 3px 5px 5px -5px #3B3B3B;
	}
	.navigatorSecond {
		margin: 0;
		padding: 0;
		display: flex;    
		padding-left: 39px;
		background: #d1d1d1 ;
	}
	.navigatorSecond li {
		display: inline-block;
		position: relative;
		z-index:80;	
	}
	.navigatorSecond li a {
		font-weight:600;
		text-decoration:none;
		font-size: 13px;
		display:block;
		color:#4a4a4a;
		line-height: 40px;
		padding: 0px 35.3px;
		-webkit-transition: all 0.2s ease-in-out 0s;
		-moz-transition: all 0.2s ease-in-out 0s;
		-o-transition: all 0.2s ease-in-out 0s;
		-ms-transition: all 0.2s ease-in-out 0s;
		transition: all 0.2s ease-in-out 0s;
	}
	#ini {
		color:#fff;
		background: #7AAFD1;
	}
	.navigatorSecond li a:hover, .navigatorSecond li:hover > a {
		color:#fff;
		background: #7AAFD1;
	}
	.navigatorSecond ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 170px;
		position: absolute;
		left: 0px;
	}
	.navigatorSecond ul li  {
		display:block;
		float: none;
		background:none;
		margin:0;
		padding:0;
	}
	.navigatorSecond ul li a  {
		font-size:13px;
		font-weight:bold;
		display:block;
		color:#797979;
		border-left: 3px solid #ffffff;
		background: #fff;
		line-height: 42px;
		transition: 0s;
	}

    <div class="menuWrap">
	<ul class="navigator">
    
        <li><a href="http://www.metagame.gg/">HOME</a></li>
        
 		<li><a href="/champions">CHAMPIONS</a></li>
        
  		<li><a href="/soloq">SOLO QUEUE <img class="iconMenu" src="/icon/expandir.png" alt=""/></a>
   			<ul class="sub-menu">
   				<li><a href="/soloq">Tier List</a></li>
  				<li><a href="/soloq/tactics">Basics & Tactics</a></li>
   				<li><a href="/soloq/psychology">Psychology</a></li>
   				<li><a href="/soloq/picksandbans">Picks & Bans</a></li>
   				<li><a href="/soloq/divisions">Division analysis</a></li>
   			</ul>
 		</li>
        
  		<li><a href="/proscene">PRO SCENE <img class="iconMenu" src="/icon/expandir.png" alt=""/></a>
   			<ul class="sub-menu">
   				<li><a href="#">Sub-Menu 1</a></li>
  				<li><a href="#">Sub-Menu 2</a></li>
   				<li><a href="#">Sub-Menu 3</a></li>
   			</ul>
        </li>
        
  		<li><a href="/analysis">IN-DEPTH ANALYSIS</a></li>
        
  		<li><a href="/statistics">STATISTICS</a></li>
        
	</ul>
    </div>

我认为这是因为Chrome中的字体有点更大胆，导致按钮宽度更高。

提前致谢

Answer 1

更新：这是因为each browser has its own font rendering engine。

我使用您当前的sans-serif字体复制了您的搜索结果。当我将字体更改为monospace时，也会出现这种情况。

我相信你最好使用非系统字体。例如，我想看看Open Sans这样的典型Google字体会发生什么，我发现使用它时问题不存在。

顺便说一句，在该网站上做得很好。看起来很好。 ^{TSM！ TSM！ TSM！}

Answer 2

*{margin:0; padding:0;} 把这一行放在你的css文件的顶部。它帮助我不同的浏览器。只是让我知道它对你有帮助。

Answer 3

.navigatorSecond li {
    display: inline-block;
    position: relative;
    z-index:80; 
}

而不是显示内联块使用float left。这不会有什么不同。或者使用.navigatorsecond {font-size = 0;}