3
當談到Web開發時，我有點新意。Chrome和Firefox中的字體顯示有所不同
我創建了一個菜單，但它的按鍵寬度視瀏覽器不同（Firefox或Chrome）
在Firefox中，我們可以看到，菜單的最後一個按鈕的一端與下面的格對齊。我們也可以理解，按鈕的寬度是136.5px 
但是，在Chrome中，字體更粗大，菜單結束被推進了一點。在這裏，按鈕的寬度是139.281px 
這是網站，菜單頂部：http://www.metagame.gg/champions/
這是HTML和菜單
\t .navigator {
\t \t margin: 0;
\t \t padding: 0;
\t \t display: flex;
\t \t padding-left: 39px;
\t \t background: #8C9BAA;
\t }
\t .navigator li {
\t \t display: inline-block;
\t \t position: relative;
\t \t z-index:100; \t
\t }
\t .navigator li a {
\t \t text-decoration: none;
\t \t font-size: 15px;
\t \t display: block;
\t \t line-height: 50px;
\t \t padding: 2px 27.75px 0px;
\t \t -webkit-transition: all 0.2s ease-in-out 0s;
\t \t -moz-transition: all 0.2s ease-in-out 0s;
\t \t -o-transition: all 0.2s ease-in-out 0s;
\t \t -ms-transition: all 0.2s ease-in-out 0s;
\t \t transition: all 0.2s ease-in-out 0s;
\t }
\t .navigator li a:hover, .navigator li:hover > a {
\t \t color:#fff;
\t \t background: #7AAFD1;
\t }
\t .navigator ul {
\t \t display: none;
\t \t margin: 0;
\t \t padding: 0;
\t \t width: 170px;
\t \t position: absolute;
\t \t left: 0px;
\t }
\t .navigator ul li {
\t \t display:block;
\t \t float: none;
\t \t background:none;
\t \t margin:0;
\t \t padding:0;
\t }
\t .navigator ul li a {
\t \t font-size:12px;
\t \t font-weight:bold;
\t \t display:block;
\t \t color:#797979;
\t \t border-left: 3px solid #ffffff;
\t \t background: #fff;
\t \t line-height: 42px;
\t \t transition: 0s;
\t }
\t .navigator ul li a:hover, .menu ul li:hover > a {
\t \t background:#EFEFEF;
\t \t border-left:3px solid #83BEE4;
\t \t color: #12303D;
\t }
\t .navigator li:hover > ul {
\t \t display: block;
\t }
\t .navigator ul ul {
\t \t left: 149px;
\t \t top: 0px;
\t }
\t #in {
\t \t color:#fff;
\t \t background: #7AAFD1;
\t }
\t .sub-menu {
\t \t border:1px solid #ddd;
\t \t border-top:0px;
\t \t border-left:0px;
\t \t box-shadow: 3px 5px 5px -5px #3B3B3B;
\t }
\t .navigatorSecond {
\t \t margin: 0;
\t \t padding: 0;
\t \t display: flex;
\t \t padding-left: 39px;
\t \t background: #d1d1d1 ;
\t }
\t .navigatorSecond li {
\t \t display: inline-block;
\t \t position: relative;
\t \t z-index:80; \t
\t }
\t .navigatorSecond li a {
\t \t font-weight:600;
\t \t text-decoration:none;
\t \t font-size: 13px;
\t \t display:block;
\t \t color:#4a4a4a;
\t \t line-height: 40px;
\t \t padding: 0px 35.3px;
\t \t -webkit-transition: all 0.2s ease-in-out 0s;
\t \t -moz-transition: all 0.2s ease-in-out 0s;
\t \t -o-transition: all 0.2s ease-in-out 0s;
\t \t -ms-transition: all 0.2s ease-in-out 0s;
\t \t transition: all 0.2s ease-in-out 0s;
\t }
\t #ini {
\t \t color:#fff;
\t \t background: #7AAFD1;
\t }
\t .navigatorSecond li a:hover, .navigatorSecond li:hover > a {
\t \t color:#fff;
\t \t background: #7AAFD1;
\t }
\t .navigatorSecond ul {
\t \t display: none;
\t \t margin: 0;
\t \t padding: 0;
\t \t width: 170px;
\t \t position: absolute;
\t \t left: 0px;
\t }
\t .navigatorSecond ul li {
\t \t display:block;
\t \t float: none;
\t \t background:none;
\t \t margin:0;
\t \t padding:0;
\t }
\t .navigatorSecond ul li a {
\t \t font-size:13px;
\t \t font-weight:bold;
\t \t display:block;
\t \t color:#797979;
\t \t border-left: 3px solid #ffffff;
\t \t background: #fff;
\t \t line-height: 42px;
\t \t transition: 0s;
\t }<div class="menuWrap">
\t <ul class="navigator">
<li><a href="http://www.metagame.gg/">HOME</a></li>
\t \t <li><a href="/champions">CHAMPIONS</a></li>
\t \t <li><a href="/soloq">SOLO QUEUE <img class="iconMenu" src="/icon/expandir.png" alt=""/></a>
\t \t \t <ul class="sub-menu">
\t \t \t \t <li><a href="/soloq">Tier List</a></li>
\t \t \t \t <li><a href="/soloq/tactics">Basics & Tactics</a></li>
\t \t \t \t <li><a href="/soloq/psychology">Psychology</a></li>
\t \t \t \t <li><a href="/soloq/picksandbans">Picks & Bans</a></li>
\t \t \t \t <li><a href="/soloq/divisions">Division analysis</a></li>
\t \t \t </ul>
\t \t </li>
\t \t <li><a href="/proscene">PRO SCENE <img class="iconMenu" src="/icon/expandir.png" alt=""/></a>
\t \t \t <ul class="sub-menu">
\t \t \t \t <li><a href="#">Sub-Menu 1</a></li>
\t \t \t \t <li><a href="#">Sub-Menu 2</a></li>
\t \t \t \t <li><a href="#">Sub-Menu 3</a></li>
\t \t \t </ul>
</li>
\t \t <li><a href="/analysis">IN-DEPTH ANALYSIS</a></li>
\t \t <li><a href="/statistics">STATISTICS</a></li>
\t </ul>
</div>我認爲這是因爲字體是在Chrome和是c有點大膽使按鈕寬度更高。
在此先感謝
兩者都可以在我的屏幕上。我個人電腦上的Chrome按鈕寬度爲136.281。以及字體渲染差異往往可以忽略不計。 –
多數民衆贊成在奇怪...因此無論如何它既不是136.5也不是139.281 –
。差別不大......它可能與屏幕分辨率有關。 –