Chrome Renders CSS Khác biệt Trực tuyến so với Ngoại tuyến?

Question

Tôi đang gặp sự cố khi Chrome hiển thị trang của tôi tốt khi được tải cục bộ, nhưng đã xảy ra sự cố khi trang đó trực tuyến. Điều đầu tiên tôi làm là kiểm tra Safari, vì cả hai đều chia sẻ cùng một công cụ kết xuất. Safari hiển thị trang của tôi tốt.

Nhấp vào liên kết trên trang và nhấn nút quay lại làm cho trang tải tốt.

Dưới đây là một hình ảnh thể hiện như thế nào khi tải trang cục bộ trên Chrome:

Và đây header được đẩy xuống một lần trang đang trực tuyến:

Đây là html có liên quan:

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

Và 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; 
} 

anh chàng này có cùng một vấn đề nhưng nó không giống như là có một giải pháp: CSS rendering in Chrome differs online from offline

Answer 1

đặt cược của tôi là bạn đã (có thể vô tình) thay đổi các thiết lập zoom của Chrome cho một trong hai trực tuyến hoặc miền ẩn của bạn.

Bấm Ctrl + để đặt lại mức thu phóng để tìm hiểu.

Answer 2

Xuất hiện sự cố về phông chữ. Rất có thể bạn không nhận được "Varela Round" trực tuyến và Helvetica sẽ có kích thước khác với phông chữ đó. Ngoại tuyến, bạn đang định cỡ cho Varela, trực tuyến, bạn sẽ nhận được Helvetica.