Javascript 第一次加载我的网页时图像的奇怪显示布局

我正试图通过GitHub页面构建我的web公文包，当我在本地测试它时，一切都按预期进行。但是，当我致力于GitHub并对其进行测试时，我会出现如下奇怪的行为：

但是，我也得到了正确的行为，特别是当我重新加载页面时

是什么导致这种奇怪的跳跃

。项目列表{
溢出：隐藏；
文本对齐：居中；
利润率：0-24px；
}
.物品清单李{
显示：内联块；
利润率：0.25px 24 px；
垂直对齐：顶部；
字号：0；
}
.项目{
文本对齐：居中；
宽度：270px；
保证金：0自动；
}
.项目.图像{
位置：相对位置；
}
.项目.图像img{
最小宽度：自动；
最大宽度：100%；
高度：自动；
边界半径：50%；
}
.项目.悬停{
显示：无；
身高：100%；
左：0；
位置：绝对位置；
排名：0；
宽度：100%；
背景#6ab84；
不透明度：0.9；
边界半径：50%；
行为：url（css/PIE.htc）；
}
.item.hover.active{
显示：块；
}
.项目.项目内容{
位置：相对位置；
显示：表格单元格；
垂直对齐：中间对齐；
高度：270px；
z指数：400；
填充：0 30px；
}
.项目a{
文字装饰：无；
}
.项目.项目内容h4{
显示：块；
背景：url（../images/bg_white_border.gif）不重复50%100%；
颜色：#fff；
文本转换：大写；
字体系列：“novecentosanswide”；
字体大小：粗体；
字体大小：14px；
线高：16px；
填充：0 20px；
文本对齐：居中；
利润率：0.15px；
}
.项目.项目内容p{
颜色：#fff；
文本对齐：居中；
显示：块；
字体大小：15px；
线高：17px；
}
/*接触*/
.清楚{
明确：两者皆有；
}
.图像/U支架{
浮动：左；
利润率：5px130px0；
宽度：370px；
}
.图像\u支架img{
宽度：100%；
高度：自动；
显示：内联；
}

您可以使用Javascript单击“所有作品”链接：

document.querySelector（'li.active'）。单击（）

我已经在Chrome开发者控制台中测试过了，它应该可以工作。只需将其放入

主体

元素末尾的

脚本

标记中

document.querySelector（'li.active'）。单击（）

因此，在页面完全加载后，我通过单击All Works（所有作品）按钮成功地破解了它：

    <script>
    window.addEventListener('load', function () {
      document.querySelector('li.active').click()
    })
    </script>

window.addEventListener（'load'，函数（）{
document.querySelector（'li.active'）。单击（）
})

---

我并不完全满意这个解决方案，但它比以前更好了。如果有人有更好的解决方案，请分享

请分享您的代码（或链接），以便让人们帮助您；如果没有这一点，就很难理解问题的原因。因为我们看不到您的代码，也无法运行您的站点来分析它，所以我们无法告诉您问题的原因。图片有助于形象化问题，但不允许任何人诊断任何事情。这就像给一个机械师看一张从你车里冒出来的烟的照片。当然，他们可以看到烟雾，但如果不亲自检查汽车，他们就不可能修好它。@ADyson，这实际上是一个精彩而准确的例子；我必须记住这一点，以备将来参考。据我所知，您的HTML代码包含一些目标不明确的

标记，在某些方面，标记嵌套似乎不正确（例如，在最后一个

中）。从控制台中，我还可以看到有一个生成HTTP 404状态的图像（'/images/img_pf02.jpg'，在

中）。最后，在“FEATURE”之前的所有开始标记都没有匹配的结束标记。我建议您检查并清理HTML代码。@PanosKikas，如果您检查控制台，您将看到包含图像的

中添加了一些内联样式，这就是导致问题的原因（未正确显示的图像将

top

属性设置为“135px”，而不是“0”）。据我所知，这种风格是由您使用的“同位素”库添加的，因此问题可能是由与之相关的东西引起的；你应该检查一下模板（'cells-by-row.js'）、初始化和它的用法。这有点好，但我仍然有一些奇怪的行为，特别是当我按住ctrl-shift+r@PanosKikas我明白你的意思。我会设法解决的