Question

当我在Chrome中查看此网页时

https://www.doctle.com/users/feedback/

它渲染不一致。

问题在于右上角的登录窗口小部件。有时它按预期呈现，如果我刷新它有时它没有正确浮动。

要重现不稳定的行为，只需重复刷新页面，就可以看到不一致。

[不稳定的渲染] - https://www.doctle.com/error.jpg

请帮忙。屏幕截图是同一页面，没有服务器端文件的任何差异。我在Firefox中验证过，这种不一致性并不存在。在Firefox中打开页面以供参考。

提前致谢。

Answer 1

这是解决问题的可能方法。当我在开发人员工具中运行Chrome的审核工具时，我得到以下内容（在其他一些不应该导致此问题的事情中）：

优化样式和脚本的顺序（2）

在文档头中的外部JavaScript文件之后包含以下外部CSS文件。为确保CSS文件并行下载，请始终在外部JavaScript之前包含外部CSS。



简单图像link.css
    的style.css

基本上它是不按顺序加载你的样式表，这就是可能导致问题的原因。

Answer 2

你有

#headerbar {
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    display: inline;
    height: 112px;
}

浮动元素是块，您在线指定它，并尝试定义其高度。我建议您阅读the doc以了解CSS框的工作原理。

Answer 3

我发现另一个可能导致Chrome中呈现不一致的因素......空白！

我有一个水平行，其中有三个框，完全填充行的宽度，并且Chrome会使第三个框包裹到下一行，即使理论上它会适合。经过仔细检查后，我发现在这些实例中第一个和第二个框之间有一些额外的像素......从过去的经验我知道这可能与空白有关，所以我删除了open和close标签之间的所有空格三个盒子里。我改变了：

<div class="row">
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
</div>

要：

<div class="row"
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
></div>

注意我是如何将结束div的闭合角度括号移动到下一行，确保闭合和开始标记之间根本没有空格。这个问题实际上很老，但大多数时候它会咬你，它会一直咬你。只有在Chrome中我才看到这种不一致的行为。

我知道这个问题已经得到了解答，但是当搜索“不一致的呈现Chrome”时谷歌的排名非常高，而且建议的答案并没有为我解决问题，因此，在最终找到解决方案之后我的情况，我认为将其添加到具有相同问题的其他人的位置会很好。

Google Chrome中存在奇怪的不一致呈现

3 个答案: