页面在同一浏览器中刷新时呈现不同
Posted
技术标签:
【中文标题】页面在同一浏览器中刷新时呈现不同【英文标题】：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 不正确） 【参考方案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" 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" border="0">
只需使用 CSS 定位 <img> 并声明：
.logo img
border: none;
【讨论】：
以上是关于页面在同一浏览器中刷新时呈现不同的主要内容，如果未能解决你的问题，请参考以下文章
是否可以在同一应用程序中浏览不同的子域或基本 URL 而无需在 React 中刷新页面？