Chrome Renders CSS w odróżnieniu od trybu online vs offline?

Question

Mam problem z Chrome, dzięki czemu moja strona działa poprawnie po załadowaniu lokalnie, ale coś poszło nie tak po stronie online. Pierwszą rzeczą, którą zrobiłem, było sprawdzenie Safari, ponieważ oba mają ten sam silnik renderujący. Safari renderuje moją stronę w porządku.

Kliknięcie linku na stronie i naciśnięcie przycisku Wstecz powoduje, że strona ładuje się również dobrze.

Tutaj jest obraz przedstawiający sposób wczytywania strony lokalnie na Chrome:

A oto nagłówek jest popychany w dół, gdy strona jest online:

Oto istotne html:

<!-- header --> 
    <div id="header2"> 
     <a href="#"><img src="images/detailpages/logo.png" alt="logo" /></a> 
     <ul> 
      <li><a href="#">Features</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li class="blue"><a href="#">Sign Up</a><a href="#">Log In</a></li> 
      <li><form><input type="text" name="form" placeholder="type another channel" id="navsearch" /><img src="images/detailpages/search.png" alt="search" /></form></li> 
     </ul> 
    </div> 
<!-- end header --> 

i CSS:

#header2 { 
position: relative; 
z-index: 999; 
height: 40px; 
width: 100%; 
background: #000; 
box-shadow: 0em 0em 0.5em #000; 
     -webkit-box-shadow: 0em 0em 0.5em #000; /* safari */ 
/* header nav type */ 
font-family: "Varela Round", Helvetica, Arial, sans-serif; 
font-size: 15px; 
} 

#header2 ul { 
float: right; 
list-style-type: none; 
} 

#header2 li { 
display: block; 
float: left; 
height: 32px; 
margin: 10px 16px 0; 
} 
/* sign up/log in button */ 
#header2 li.blue { 
    background: url('../images/detailpages/login.png'); 
    width: 170px; 
    height: 40px; 
    margin: 0; 
} 
#header2 li.blue a { 
    display: block; 
    float: left; 
    margin: 10px 3px 0 24px; 
} 
#header2 input { 
    height: 22px; 
    width: 220px; 
    padding: 0 8px; 
    font-family: "Varela Round", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    color: #333; 
} 
#header2 form img { 
    display: block; 
    float: right; 
    padding-left: 5px; 
} 

Ten facet miał ten sam problem, ale to nie wygląda jak było rozwiązanie: CSS rendering in Chrome differs online from offline

Answer 1

Mój zakład jest już (być może przypadkowo) zmienił ustawień powiększenia Chrome dla obu trybie online lub offline, domeny.

Naciśnij Ctrl + zresetować poziom powiększenia się dowiedzieć.

Answer 2

Pojawia się problem z czcionką. Szanse na to, że nie dostaniesz "Rundy Vareli" w Internecie, a Helvetica będzie miała inny rozmiar niż ta czcionka. W trybie offline, wybierasz Varela, online, dostajesz Helvetica.