2011-12-16 20 views
7

Chrome, yerel olarak yüklendiğimde sayfamın iyi oluşturulmasında sorun yaşıyor, ancak sayfa çevrimiçi olduğunda bir şeyler ters gidiyor. Yaptığım ilk şey, her ikisi de aynı oluşturma motorunu paylaştıkları için Safari'yi kontrol etmekti. Safari sayfamı güzelleştirir.Chrome Renders CSS Farklı Çevrimiçi vs Çevrimdışı?

Sayfadaki bir bağlantıya tıklamak ve geri düğmesine basmak sayfanın da iyi yüklenmesine neden olur. enter image description here

Ve burada başlık sayfası çevrimiçi bir kez aşağı doğru itilir: Burada

bir görüntü Chrome yerel olarak nasıl sayfa yükleri gösteren İşte enter image description here

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

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

Bu adamaynı problem vardı ama bir çözüm varmış gibi gözükmüyor: CSS rendering in Chrome differs online from offline

+1

Aynı sorunu yaşıyorum. – adardesign

+0

, nedenini görmek için çevrimiçi versiyona bir bağlantı koyabilir misiniz? – Mark

+0

@Mark Üzgünüm, bu projeyi artık bana sahip değilim. Ayrıca benim hacky cevabımı da kaldırdım çünkü bu ... bilge değildi. – helloworld

cevap

4

Bahse girerim (belki yanlışlıkla), çevrimiçi veya çevrimdışı etki biri için Chrome'un Yakınlaştırma ayarlarını değiştirmiş olduğunu.

basın CTRL + öğrenmek için yakınlaştırma seviyesini sıfırlamak için.

+0

Öneri için teşekkürler! Ancak, doğru bir şekilde büyütülmüştüm. – helloworld

+1

omg, teşekkür ederim. Bu beni deli ediyordu. komployu kaybettiğimi sandım. – Tom

0

Yazı tipi sorunu görünüyor. Şansınız online "Varela Round" a sahip değilsiniz ve Helvetica bu yazı tipinden farklı boyutlarda olacak. Çevrimdışı, Varela için boyutlandırıyorsunuz, çevrimiçi, Helvetica alıyorsunuz.

+0

Teşekkürler, kontrol ettim, ancak resmime bakıldığında, tarayıcının doğru yazı tipini Varela Round'u görüntülediği görülüyor. – helloworld

İlgili konular