Question

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

http://fast.kirkdesigns.co.uk/blog
如上所述，但使用url片段#navigation
如上所述，但使用url片段＃node-2655

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

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

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

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

Answer 1

删除css_75afd7072eaf4096aaebf60674218e31.css中overflow:hidden上的#main

Answer 2

我说这是FireFox中的渲染错误，因为它在Opera中很好。反正不应该像你说的那样改变CSS（除非你使用jQuery或其他东西）。

Answer 3

我也有这个问题，并且认为我可以看到发生了什么。

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

FF也知道这两个相互抵消，但似乎看看5678px填充并决定列块是否在#wrapper块的底部。这是溢出 - 并且在#wrapper上将溢出设置为auto，您会看到#wrapper的真实大小，并且在侧面有一个滚动条。

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

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

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

你也可以从#wrapper上取下“display：hidden”，但你的页面最终会长达半英里。

Answer 4

我只想指出，在头部链接的30多个样式表中可能会有一些奇怪的继承。可能也没有，并且它可能是Dan建议的渲染错误（可能与:target样式有关）。我觉得值得指出的是，如果你有超过30种样式表，你可能会开始看到一些奇怪的东西，无论发生什么其他事情。

Answer 5

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

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

Answer 6

对不起，这不是“答案”，这是对其他评论的回复。这个问题只是令人讨厌。它很容易隔离（即与样式表的数量无关），并且没有正确的“解决方案”，因为无法实现所需的渲染。

<!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>

Answer 7

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

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

Answer 8

我可以使用一些JavaScript来解决此问题，方法是将正文滚动到溢出隐藏元素滚动到的位置。

setTimeout(() => {
    let intendedScroll = document.getElementById("fragmentfix").scrollTop;
    document.getElementById("fragmentfix").scrollTop = 0;
    window.scrollTo(0, intendedScroll);
}, 0)

URL片段如何影响CSS布局？

8 个答案: