2011-12-16 9 views
7

Sto riscontrando un problema con il rendering della pagina di Chrome quando caricato localmente, ma qualcosa non funziona quando la pagina è online. La prima cosa che ho fatto è stato controllare Safari, perché condividono entrambi lo stesso motore di rendering. Safari rende bene la mia pagina.Chrome genera i CSS in modo diverso online o offline?

Se si fa clic su un collegamento sulla pagina e si preme il pulsante Indietro, anche la pagina viene caricata correttamente.

Ecco un'immagine che mostra come il caricamento della pagina a livello locale su Chrome: enter image description here

E qui il colpo di testa viene spinto verso il basso una volta che la pagina è in linea: enter image description here

Ecco il codice html corrispondente:

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

e 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; 
} 

questo ragazzo ha avuto lo stesso problema, ma non sembra come se ci fosse una soluzione: CSS rendering in Chrome differs online from offline

+1

Ho lo stesso problema. – adardesign

+0

potresti inserire un collegamento alla versione online, solo per vedere perché? – Mark

+0

@Mark Scusa, non ho più quel progetto disponibile per me. Ho anche rimosso la mia risposta hacky perché non era ... saggio. – helloworld

risposta

4

La mia scommessa è che avete (forse involontariamente) ha cambiato le impostazioni di zoom di Chrome sia per la vostra linea o il dominio non in linea.

Press Ctrl + per ripristinare il livello di zoom per scoprirlo.

+0

Grazie per il suggerimento! Tuttavia, sono stato ingrandito correttamente. – helloworld

+1

omg, grazie. questo mi stava facendo impazzire. pensavo di aver perso la trama. – Tom

0

Sembra essere un problema di carattere. Probabilmente non otterrai "Varela Round" online e Helvetica avrà una dimensione diversa da quella del font. Offline, stai dimensionando per Varela, online, stai ricevendo Helvetica.

+0

Grazie, ho controllato, ma guardando la mia immagine sembra che il browser visualizzi il carattere corretto, Varela Round. – helloworld