Question

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

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

我无法为任何人提供一段代码，因为我不知道问题源自何处。有问题的页面是www.Calibrus.com的索引。真正令人惊奇的是，通过使用Chrome开发工具，我可以将display：none设置为不正确的ul，然后将显示设置恢复正常，并且ul再次显示它应该在哪里。这告诉我，完全相同的html和css以某种方式呈现不同（无论使用何种脚本）。

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

有没有人知道这里有什么想法？

Answer 1

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

每当我触发实时网站上的布局错误时，都会伴随第一张幻灯片无法正确呈现。这会导致<div id="r1">的高度为0，这反过来似乎会加剧前面提到的浮动bug。浮动的<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;
}

一旦我添加了这些规则，我就再也无法复制渲染错误了。

旁注：

我建议在使用<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">

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

.logo img {
  border: none;
}

在同一浏览器中刷新时页面呈现方式不同

1 个答案:

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

旁注：