我有一个不寻常的问题，快把我逼疯了!我还没有找到与这个确切问题相关的问题。
我网站上有一个页面，其中某些元素在随机页面加载时呈现不正确。以 chrome 为例，页面将正常呈现，但在多次刷新后，标题中的基本 ul 将向下移动到正文中。有时轮播不会出现，或者导航 block 会滑到下一行。我也在 Firefox 上复制了这种行为。
我真的不能给任何人看一段代码，因为我不知道问题出在哪里。出现问题的页面是 www.Calibrus.com 的索引。 真正令人惊奇的是，通过使用 Chrome 开发工具，我可以将 display:none 设置为不正确的 ul，然后将 display 设置回正常，然后 ul 再次呈现它应该呈现的位置。这向我表明，完全相同的 html 和 css 以某种方式呈现不同(无论使用的是什么脚本)。
此外，这不是服务器的问题。我在本地运行代码时遇到了同样的问题。
有人知道这里发生了什么吗？
最佳答案
我认为这个问题与 float 和幻灯片 javascript 有关。
每当我在实时网站上触发布局错误时，都会伴随第一张幻灯片无法正确呈现。这会导致 <div id="r1">高度为 0这反过来似乎加剧了上述 float 错误。 <ul>之间似乎有些紧张这是 float 的，<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;
}
一旦我添加了这些规则，我就无法再复制渲染错误。
旁注:
我建议在开头 <head> 之后声明您的字符编码用 <meta charset="utf-8"> 标记.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
另外，border图像的属性已过时。所以而不是:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
只需定位 <img>使用 CSS 并声明:
.logo img {
border: none;
}
关于css - 在同一浏览器中刷新时页面呈现不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17500255/