Chrome渲染CSS在线与离线不同?

时间:2011-12-16 01:31:24

标签: css google-chrome render local

我遇到问题,Chrome在本地加载时呈现的页面很好,但是一旦页面在线,就会出现问题。我做的第一件事是检查Safari,因为它们都共享相同的渲染引擎。 Safari使我的页面很好。

单击页面上的链接并按后退按钮可以使页面加载正常。

以下图片显示了如何在Chrome上本地加载页面: enter image description here

一旦页面在线,标题就会被按下: enter image description here

以下是相关的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 -->

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

这家伙有同样的问题,但看起来没有解决方案: CSS rendering in Chrome differs online from offline

2 个答案:

答案 0 :(得分:4)

我的赌注是你(可能是偶然)改变了在线或离线域名的Chrome缩放设置。

Ctrl + 0 重置缩放级别以查找。

答案 1 :(得分:0)

似乎是一个字体问题。您可能无法在线获取“Varela Round”,而Helvetica的大小与该字体不同。离线,您正在为Varela上网,在线,您将获得Helvetica。