Question

请查看Chrome中的以下两个链接：

注意导航痕迹和“线程评级”部分如何在“工作”链接中正确呈现，但是在“损坏”链接的用户面板下卡住了。我花了很多时间试图弄清楚为什么会发生这种情况（在mybb.com和其他几个论坛上询问，向谷歌Chrome团队报告bug等）但是没有任何运气，所以希望Stackoverflow再次出现。

以下是我所知道的：

这只发生在谷歌浏览器中，据我所知，只有你有内部链接的永久链接帖子 - 以“pid = [number] #pid [number]”结尾的页面
我相信它正在发生，因为启动内容部分的“包装器”div在与用户面板相同的位置呈现，而不是在它下面，它位于文档流中。
在“内容”div之前添加清算div（“style = clear：both;”）修复了Chrome开发者工具中的问题，但是当您将其添加到实际代码时没有任何反应。

这是我在html / css中遇到的最令人困惑和令人沮丧的事情。有谁知道为什么会这样，以及我如何解决它？

谢谢，

克里斯

Answer 1

这是你的罪魁祸首。

#content {
  overflow: hidden;
}

这正是您不应该使用隐藏溢出来清除浮动的原因。锚链接将导致溢出元素在某些情况下滚动。请查看clearfix以清除浮动。

在您的控制台中运行此javascript以演示此问题：

document.getElementById("content").scrollTop = 0