Chrome 在线和离线渲染 CSS 的方式不同？

Posted 2023-02-22

【中文标题】Chrome 在线和离线渲染 CSS 的方式不同？

【英文标题】：Chrome Renders CSS Differently Online vs Offline?

【发布时间】：2012-01-21 15:57:26

【问题描述】：

我在本地加载时 Chrome 无法正常渲染我的页面，但页面上线后出现问题。我做的第一件事是检查 Safari，因为它们共享相同的渲染引擎。 Safari 可以很好地呈现我的页面。

点击页面上的链接并按下后退按钮也会使页面加载正常。

下图显示了页面如何在 Chrome 上本地加载：

一旦页面上线，这里的标题就会被下推：

这里是相关的html：

<!-- header -->
    <div id="header2">
        <a href="#"><img src="images/detailpages/logo.png"  /></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"  /></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

【问题讨论】：

我也有同样的问题。

你能放一个在线版本的链接，看看为什么？

@Mark 抱歉，我没有该项目可用了。我还删除了我的 hacky 答案，因为那是……不明智的。

我也有同样的问题。一旦我从服务器而不是从磁盘加载网页，导航就会向下移动很多。从服务器加载时，它在 Firefox 和 Safari 中看起来完全正常。这不是字体问题，请仔细检查。

【参考方案1】：

似乎是字体问题。您可能没有在线获得“Varela Round”，并且 Helvetica 的大小将与该字体不同。离线时，您正在为 Varela 量身定做，在线时，您正在获得 Helvetica。

【讨论】：

谢谢，我检查了，但查看我的图像，浏览器显示的字体似乎是正确的 Varela Round。

【参考方案2】：

我敢打赌，您已经（可能不小心）更改了在线或离线域的 Chrome 缩放设置。

按 Ctrl + 0 重置缩放级别以找出答案。

【讨论】：

天哪，谢谢。这让我发疯了。以为我失去了情节。