3
Ich bin ein bisschen neu, wenn es um Web-Entwicklung geht.Schriftart zeigt anders in Chrome und in Firefox
Ich habe ein Menü erstellt, aber seine Tasten Breite unterscheiden sich je nach Browser (Firefox oder Chrome)
In Firefox können wir das Ende der letzten Taste des Menüs sehen, dass unter dem div ausgerichtet ist, . Wir können auch schätzen, dass die Breite der Schaltfläche ist 136.5px 
Allerdings sind in Chrome die Schriftarten kühner und das Menü Ende ist ein wenig vorwärts geschoben. Hier wird die Breite der Schaltfläche ist 139.281px 
Dies ist die Website, das Menü ist auf der Oberseite: http://www.metagame.gg/champions/
Dies ist die HTML und der CSS-Code für das Menü
\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>ich denke, es ist, weil die Schrift etwas kühne in Chrome ist und dass c auses die Knopfbreite, um höher zu sein.
Vielen Dank im Voraus
beide sind in Ordnung auf meinem Bildschirm. Chrome-Tastenbreite auf meinem PC ist 136,281. Nun, der Unterschied beim Font-Rendering ist oft vernachlässigbar. –
Das ist komisch ... also ist es weder 136.5 noch 139.281 –
. Der Unterschied ist nicht viel .. und es kann etwas mit der Bildschirmauflösung zu tun haben. –