字體在Chrome和Firefox中顯示不同

Question

在Web開發方面，我有點新鮮。

我創建了一個菜單，但其按鈕寬度因瀏覽器而異（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

更新：這是因為每個瀏覽器都有自己的字體渲染引擎 。

---

我用您當前的sans-serif字體復制了您的結果。 當我將字體更改為monospace字體時也會發生這種情況。

我相信你最好使用非系統字體。 例如，我想看看Open Sans等典型Google字體會發生什么，我發現使用它時問題不存在。

順便說一句，在該網站上做得很好。 看起來很好。 ^{TSM！ TSM！ TSM！}

Answer 2

*{margin:0; padding:0;} *{margin:0; padding:0;}將此行放在css文件的頂部。 它幫助我不同的瀏覽器。 只是讓我知道它對你有幫助。

Answer 3

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

而不是顯示內聯塊使用浮動左。 這不會有什么不同。 或者使用.navigatorsecond {font-size = 0;}