html - URL 片段弄乱了 CSS

Question

我将不得不链接到外部网站，因为我无法在 JSFiddle 中重现此问题。

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

此行为在以下方面是一致的(因此不太可能是浏览器错误):

• 谷歌浏览器 31
• 火狐 21
• Internet 浏览器 8

实时 View (访问时间:19/12/13)问题已解决 - 见下图:

• 页面应该是这样的:http://sixplusfour.co.uk/encyclopedia/
• 这是带有命名 anchor 的页面:http://sixplusfour.co.uk/encyclopedia/#pagelist

错误在下图中并排显示:

有谁知道是什么导致了这种行为？

Answer 1

我的猜测是 #pagelist 的 :after 伪类导致了这个。 我不知道为什么会这样但是显示似乎没有正确加载。

这个伪类看起来像是一个快速修复。您可能希望删除这个伪类 并修复真正的问题。 尝试在包装器中添加一个overflow: hidden，使其 float 的内容保持在流中:

.col-group {
   margin-left: -1em;
   margin-right: -1em;
   zoom: 1;
   overflow: hidden; /*new line*/
}

我无法在重新加载时对其进行测试，但这应该可以。

更新

真正的问题可能是因为 base-line 正在根据其字体移动。它包含一个点作为内容。现在还不清楚为什么在重定向时会发生这种情况。但是，我建议您为此设置一个空白内容:

.col-group:after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: ""; /* removed dot */
}

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