3

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

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

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

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

有谁知道这里发生了什么？

4

1 回答 1

2

我相信这个问题与浮动和幻灯片 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;
}

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

边注：

我建议在开始<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;
}
于 2013-07-07T02:06:03.097 回答