我有一个不寻常的问题，让我抓狂！我还没有找到与这个确切问题相关的问题。我的网站上有一个页面，在随机页面加载时某些元素会呈现出错误。例如在Chrome中，页面将正常呈现，但是在多次刷新后，标题中的基本ul会向下移动到主体中。有时轮播图不会出现，或者导航块会滑动到下一行。我已经在Firefox上复制了这种行为。
我无法提供代码片段供任何人查看，因为我不知道问题的起源在哪里。存在问题的页面是www.Calibrus.com的索引页。
真正惊人的是，通过使用Chrome Dev Tools，我可以将display:none设置为不正确的ul，然后将显示设置回正常状态，ul再次呈现在应该呈现的位置。这表明，即使没有使用任何脚本，完全相同的HTML和CSS也会以不同的方式呈现。
此外，这不是服务器的问题。在本地运行代码时，我遇到了同样的问题。
有人知道这里发生了什么吗？
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">
只需使用CSS针对<img>进行目标设置并声明：
.logo img {
border: none;
}
- Benjamin
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，当我按下刷新时，会得到正确的DOCTYPE：<!DOCTYPE html>。我可以一遍又一遍地这样做。现在我只需要弄清楚为什么出现这种情况！ - Lee Kowalkowski