Font displays different in Chrome and in Firefox

Question

I am a bit new when it comes to web development.

I have created a menu but its buttons width are different depending on the browser (Firefox or Chrome)

In Firefox, we can see that the end of the last button of the menu is aligned with the div below. We can also appreciate that the width of the button is 136.5px

However, in Chrome the fonts are bolder and the menu end is pushed a bit forward. Here, the width of the button is 139.281px

This is the site, the menu is on the top: http://www.metagame.gg/champions/

This is the HTML and the CSS code for the menu

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

I think it is because the font is a bit bolder in Chrome and that causes the button width to be higher.

Thanks in advance

both are okay on my screen. Chrome button width on my PC is 136.281. well the font rendering difference is often negligible. — Severino Lorilla Jr., Apr 22 '16 at 03:35
anyway. the difference is not much.. and it may have something to do with screen resolution. — Severino Lorilla Jr., Apr 22 '16 at 03:40
@juanfran I replicated your findings between browsers. See below for more details and a possible solution. — timolawl, Apr 22 '16 at 03:59

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

Update: This is because each browser has its own font rendering engine.

I replicated your results with your current sans-serif font. The case also occurred when I changed the font to monospace.

I believe you're better off using a non-system font. For instance, I wanted to see what would happen with a typical Google font such as Open Sans, and I found that the issue did not exist when using it.

By the way, good work on that website. It looks nice. ^{^{^{TSM! TSM! TSM!}}}

edited May 23 '17 at 10:29

Community

1
1

answered Apr 22 '16 at 03:48

timolawl

5,434
13
29

Thank you very much for your answer! Maybe this is very greedy but I dont know if its worth including a library just for this problem. The site is under construction, so it will look much better when its finished. Thanks agan :D – juan fran Apr 22 '16 at 04:38
Sure thing! Just know that [browsers render fonts differently](http://stackoverflow.com/a/5082824/5812121) and if typography is a concern, the recommendation is to use a custom web font that is optimized for consistency between browsers. – timolawl Apr 22 '16 at 04:51
In the end I decided to do it! Works perfectly ^^ Thanks! pd: C9 will rise again... hopefully – juan fran Apr 22 '16 at 04:56

score 1 · Answer 2 · answered Apr 22 '16 at 05:00

1

*{margin:0; padding:0;} put this line in top of your css file. It helps me for different browser. Just let me know that it helps you or not.

answered Apr 22 '16 at 05:00

Sus Hill

286
5
18

score 0 · Answer 3 · answered Apr 22 '16 at 05:14

0

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

instead of display inline-block use float left. that will not be different. or use .navigatorsecond{font-size=0;}

answered Apr 22 '16 at 05:14

Bijay Mishra

53
8

Font displays different in Chrome and in Firefox

3 Answers3