页面在同一浏览器中刷新时呈现不同答案

【问题标题】：Page renders differently on refresh within same browser页面在同一浏览器中刷新时呈现不同
【发布时间】：2013-07-04 05:28:28
【问题描述】：

我有一个不寻常的问题让我发疯！我还没有找到与这个确切问题相关的问题。

我的网站上有一个页面，其中某些元素在随机页面加载时呈现不正确。例如，使用 chrome，页面将正常呈现，但在多次刷新后，标题中的基本 ul 将向下移动到正文中。有时轮播不会出现，或者导航块会滑到下一行。我也在 Firefox 上复制了这种行为。

我真的无法提供任何人都可以查看的 sn-p 代码，因为我不知道问题出在哪里。有问题的页面是 www.Calibru.com 的索引。真正令人惊奇的是，通过使用 Chrome 开发工具，我可以将 display:none 设置为不正确的 ul，然后将 display 设置为正常，并且 ul 会再次呈现它应该在的位置。这向我表明，完全相同的 html 和 css 以某种方式呈现不同（无论使用任何脚本）。

另外，这不是服务器的问题。我在本地运行代码时遇到了同样的问题。

有人知道这里发生了什么吗？

【问题讨论】：

如果您在 chrome web 工具中禁用缓存或使用新浏览器打开页面，问题是否仍然存在？
可能是您在页面完全加载之前刷新？ IE。当启动脚本仍在运行时等。
很难说，但在首页禁用缓存时，该问题似乎不太常见。有趣的是，当以这种方式查看时，问题也开始出现在站点内的其他页面上。
刷新页面前的时间不影响渲染。
你只有两个版本吗？正确和“奇怪”对吗？这些“随机”页面，它们是否有机会发布响应？（由于提交带有method=POST的表单而显示的页面）如果是这样...我现在遇到了这个问题，这很奇怪！（GET 看起来正确，POST 不正确）

标签： css refresh rendering google-chrome-devtools intermittent

【解决方案1】：

我认为这个问题与浮动和幻灯片 javascript 有关。

每当我在实时网站上触发布局错误时，都会伴随第一张幻灯片无法正确呈现。这将导致<div id="r1"> 的高度为0，这反过来似乎会加剧上述浮动错误。浮动的<ul> 和不浮动的<a> 之间似乎有些紧张。

这是对我有用的解决方案：

在index.html 中添加一个类（或您喜欢的 ID）以允许您定位 CSS 中的链接。在这个例子中，我只是简单地给了它一个logo的类：

<a class="logo" href="index.html">
  <img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>

然后，在你的 CSS 中：

// target the link using your chosen selector
.logo {
  display: block;
  float: left;
}

添加这些规则后，我无法再复制渲染错误。

旁注：

我建议在使用 <meta charset="utf-8"> 开头的 <head> 标记之后声明您的字符编码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Calibrus</title>

此外，图像的border 属性已过时。所以而不是：

<img src="images/Calibrus_logo.png" alt="logo" border="0">

只需使用 CSS 定位 <img> 并声明：

.logo img {
  border: none;
}

【讨论】：