URL片段搞砸了CSS

Question

我将不得不链接到外部网站，因为我在JSFiddle中复制此问题时遇到了麻烦。

由于某些原因，使用与页面上存在的ID对应的URL片段访问我的页面似乎拉出文档的某些区域，因此不会使用不存在的ID再现该行为。页面上没有可能导致此行为的JavaScript。

此行为在以下内容中是一致的（因此不太可能是浏览器错误）：

• Google Chrome 31
• Firefox 21
• Internet Explorer 8

实时查看（访问时间：2013年12月19日）已解决问题 - 请参阅下图：

• 这是应该看的页面：http://sixplusfour.co.uk/encyclopedia/
• 这是包含命名锚点的页面：http://sixplusfour.co.uk/encyclopedia/#pagelist

错误在下图中并排显示：

有谁知道可能导致此行为的原因是什么？

Answer 1

我的猜测是:after的{​​{1}}伪类引起了这种情况。 我不知道为什么会发生这种情况但是#pagelist似乎没有正确加载。

这个伪类似乎是一个快速修复。您可能希望删除此伪类并修复真正的问题。 尝试将display添加到您的包装器，以便其浮动的内容保留在流程中：

overflow: hidden

我无法在重新加载时测试它，但这应该可行。

更新

真正的问题可能是因为.col-group { margin-left: -1em; margin-right: -1em; zoom: 1; overflow: hidden; /*new line*/ } 正在根据其字体进行转换。它包含一个点作为内容。现在仍然不清楚为什么在重定向时会发生这种情况。不过，我建议你这是一个空洞的内容：

base-line

这应该可以在没有太多修改的情况下工作。

Answer 2

如果您在overflow: auto;上设置#container，则会开始了解问题发生的原因。 #container的内容实际上高于其容器。当URL片段到位后，浏览器会在 #container内滚动以到达它。

（我还没弄清楚原因，但希望这会指出你正确的方向。）

Answer 3

它可能与:focus或:hover选择器相关联。

我在style.css：

中看到了这段代码

.pagenav li a:focus {
  outline: #114d74 solid 1px;
  outline-offset: -1px;
  padding-left: 0.5em;
}

这是不是padding或outline的不同价值会让事情发生变化？