4

比较这 3 个 URL（在每种情况下查看顶部导航栏）：

  1. http://fast.kirkdesigns.co.uk/blog
  2. 如上所述，但带有 url 片段 #navigation
  3. 如上所述，但带有 url 片段 #node-2655

请注意，唯一的区别是最后的 URL 片段。

前两页显示得非常好（至少在 Firefox 中）。这是第三个问题所在。片段#node-2655 将顶部导航栏推离屏幕顶部。然后，当您向上滚动到页面顶部时，导航栏已被切成两半。当使用任何导致导航栏在页面首次加载时超出初始视口的 URL 片段时，就会发生这种情况。

那么，使用 url 片段如何影响这样的 css 布局？！

解决方案：如下所示，删除溢出：隐藏在保存导航栏的容器元素上修复了问题。我很想知道为什么！

4

8 回答 8

8

去掉css_75afd7072eaf4096aaebf60674218e31.css 中的overflow:hiddenon#main

于 2009-08-01T11:03:40.187 回答
2

我会说这是 FireFox 中的一个渲染错误，因为它在 Opera 中很好。无论如何，锚点都不应该像你说的那样改变 CSS（除非你使用 jQuery 或其他东西）。

于 2009-08-01T10:16:34.960 回答
2

我也有这个问题，我想我可以看到发生了什么。

具有大量（5678 像素）边距和填充的“列”块使该块非常高。在 Firefox 以外的浏览器中，正值和负值相互抵消，但 FF 确实让它变得那么高 - 有点。

FF 也知道两者相互抵消，但似乎查看了 5678px 填充并确定列块突出了 #wrapper 块的底部。这是溢出 - 并且在#wrapper 上将溢出设置为自动，您会看到#wrapper 的真实大小，并带有滚动条。

将溢出设置为隐藏时，FF 会移除滚动条，但似乎仍会滚动 #wrapper 的内容，以便片段指向的项目位于页面顶部。这是可滚动块中片段链接的正常行为，但由于没有滚动条，您无法再次向下滚动内容，因此看起来布局已受到片段的影响。

所以简而言之，我怀疑FF在这个例子中操作了一个不可见的滚动条。这可能被认为是一个错误，但它可能是正确的行为。能够使用 URL 片段在非溢出的固定大小块内上下滚动内容是一种可以有效地用于实现即使在没有 JavaScript 的情况下也能工作的图像“滑块”的技术。

希望有帮助。这让我困惑多年，这个解释突然让我大吃一惊。我目前的解决方法是使用 jQuery“滚动到”插件将整个页面向下滚动到片段，因为这似乎阻止了 #wrapper 的内容在内部滚动。

您也可以将“显示：隐藏”关闭#wrapper，但您的页面最终会长达半英里。

于 2010-11-02T15:04:00.753 回答
1

我只想指出，可能有一些奇怪的继承自头部链接的 30 多个样式表。也可能没有，这可能是:targetDan 建议的渲染错误（可能与样式有关）。我只是觉得值得指出的是，如果你有超过 30 个样式表，你可能会开始看到一些奇怪的东西，不管会发生什么。

于 2009-08-01T10:22:06.073 回答
1

原因是具有大填充的列已经扩展了它的容器，但是扩展随后被隐藏但溢出：隐藏；但是随着片段的使用，它被滚动到片段的位置，有效地切断了上面的任何东西。您可以使用 javascript 并将 scrollTop 设置为 0 并将其滚动回正常位置。

基本上是一个奇怪的边缘情况，浏览器似乎不能很好地处理。

于 2011-02-05T11:44:26.717 回答
0

抱歉，这不是“答案”，而是对此处其他评论的回应。这个问题简直令人瞠目结舌。它很容易隔离（即，与样式表的数量无关），并且没有适当的“解决方案”，因为无法实现所需的呈现。

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  margin: 1em auto;
  width: 40em;
}
#wrapper {
  overflow: hidden;
  position: relative;
}
#c1 {background-color: #aaf;}
#c2 {background-color: #ccf;}
.column {
  float: left;
  margin-bottom: -5678px;
  padding-bottom: 5678px;
  width: 50%;
}
#footer {
  background-color: #eee;
  padding: 1px;
  text-align: center;
}
p {margin: 1em;}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="c1" class="column">
<p>This is some content in a short column. We would need some Javascript to change its height if we wanted a different background color for each column to stretch the full height of the respective columns...or we can use large padding together with an equal negative margin.</p>
<ul>
<li><a href="#p1">Jump to P1</a></li>
<li><a href="#p2">Jump to P2</a></li>
<li><a href="#p3">Jump to P3</a></li>
</ul>
</div>
<div id="c2" class="column">
<p id="p1">The desired effect is to have the height of the two columns appear the same. We use 'overflow:hidden' on the containing div (#wrapper) to wrap it around the floated columns.</p>
<p id="p2">These paragraphs have fragment identifiers. Problem comes in when clicking one of the links on the left. Instead of scrolling just the page, the browser scrolls the div with 'overflow:hidden' so the target is at the top. It does this even if the target is already visible.</p>
<p id="p3">Opera does not exhibit this behavior. This occurs in Chrome/Safari, Firefox, and IE. (Interestingly, IE also works as expected if we completely remove the DOCTYPE declaration.)</p>
</div>
</div>
<div id="footer">
<p>Footer stuff.</p>
<p>To see why 'overflow: hidden' (or any other piece of the CSS) is needed, just try disabling it.</p>
</div>
</div>
</body>
</html>
于 2010-06-04T14:17:35.043 回答
0

顺便说一句，上述技术通常用于提供灵活宽度的多列布局。现在这可能变得不那么重要了，因为固定宽度的布局变得越来越多 - 浏览器能够放大网页以查看小文本，而固定宽度使控制页面的排版变得更加容易，例如，无论用户选择何种字体大小和放大倍数，设置宽度（以 em 为单位）以每行显示理想的 9 个单词。

对不起，如果这听起来不像是一个答案，但它基本上建议放弃这个旧模型并考虑转移到固定宽度的列（这是一个全新的主题）。

于 2010-11-02T15:11:12.527 回答
0

我能够用一些javascript来解决这个问题，将正文滚动到溢出隐藏元素滚动到的位置。

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)
于 2019-05-18T04:42:40.313 回答