Как фрагмент URL может повлиять на макет CSS?

Question

Сравните эти 3 URL-адреса (посмотрите на верхнюю панель навигации в каждом случае):

1. http://fast.kirkdesigns.co.uk/blog
2. как указано выше, но с фрагментом URL # navigation
3. как указано выше, но с фрагментом URL # node-2655

Обратите внимание, что единственным отличием является фрагмент URL на конце.

Первые две страницы отображаются абсолютно нормально (по крайней мере, в Firefox). Это третья проблема. Фрагмент # node-2655 отодвигает верхнюю панель навигации с верхней части экрана. Когда вы затем прокручиваете обратно вверх страницы, навигационная панель была разрезана пополам. Это происходит при использовании любого фрагмента URL, который приводит к тому, что панель навигации выходит из исходного окна просмотра при первой загрузке страницы.

Итак, как использование фрагмента URL может повлиять на макет CSS следующим образом?!

РЕШЕНИЕ: как предложено ниже, устранение переполнения: скрытого в элементе контейнера, в котором находилась панель навигации, решило проблему. Хотелось бы понять почему, хотя!

Answer 1

Удалите overflow:hidden в #main в css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

У меня тоже есть эта проблема, и я думаю, что вижу, что происходит.

Блок "column" с массивным (5678 пикселей) полем и отступами делает этот блок очень высоким. В браузерах, отличных от Firefox, положительные и отрицательные значения взаимно компенсируют друг друга, но FF действительно делает его таким высоким.

FF также знает, что оба взаимно отменяют друг друга, но, похоже, смотрит на отступ 5678px и решает, что блок столбца высовывает нижнюю часть блока #wrapper. Это переполнение - и при переполнении, установленном в auto на #wrapper, вы видите истинный размер #wrapper с полосой прокрутки вниз.

Если для переполнения задано значение «скрыто», FF убирает полосу прокрутки, но все равно, кажется, прокручивает содержимое #wrapper, так что элемент, на который указывает фрагмент, находится вверху страницы. Это нормальное поведение для ссылок на фрагменты в прокручиваемых блоках, но поскольку полоса прокрутки отсутствует, вы не можете снова прокрутить содержимое вниз, следовательно, похоже, что фрагмент был изменен фрагментом.

Короче говоря, я подозреваю, что FF использует невидимую полосу прокрутки в этом примере. Это можно считать ошибкой, но, вероятно, это правильное поведение. Возможность прокручивать содержимое вверх и вниз внутри не переполненного блока фиксированного размера с использованием фрагментов URL - это метод, который можно эффективно использовать для реализации «ползунков» изображений, которые работают даже в отсутствие JavaScript.

Надеюсь, это поможет. Это озадачивало меня в течение многих лет, и это объяснение внезапно поразило меня на ровном месте. Мой текущий способ решения этой проблемы - использовать плагин jQuery "scroll to" для прокрутки всей страницы до фрагмента, так как это, похоже, предотвращает внутреннюю прокрутку содержимого #wrapper.

Вы также можете снять «display: hidden» с #wrapper, но ваша страница в итоге получится длиной в полмили.

Answer 3

Я бы сказал, что это ошибка рендеринга в FireFox, так как в Opera это нормально. В любом случае не должно быть, чтобы якорь изменил CSS, как вы говорите (если вы не используете jQuery или что-то в этом роде).

Answer 4

Причина в том, что столбец с большим отступом расширил свой контейнер, но расширение затем скрыто, но переполнение: скрыто; но с использованием фрагмента он прокручивается в положение фрагмента, эффективно отсекая что-либо выше этого. Вы можете использовать javascript и установить scrollTop на 0, и он прокрутит его обратно в нормальное положение.

В основном это странный случай, который браузеры, похоже, не очень хорошо обрабатывают.

Answer 5

Я просто укажу, что может быть какое-то странное наследование от 30+ таблиц стилей, связанных с головой. Может и не быть, и это, вероятно, ошибка рендеринга (возможно связанная со стилем :target), которую предложил Дэн. Я просто чувствовал, что стоит указать, что если у вас есть более тридцати таблиц стилей, вы, вероятно, начнете видеть какую-то странность, что бы ни случилось еще.

Answer 6

Я смог решить эту проблему с помощью некоторого JavaScript, чтобы прокрутить тело в положение, в которое был прокручен скрытый элемент переполнения.

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

Answer 7

Как примечание, вышеупомянутая методика обычно используется для обеспечения многостолбцовой компоновки гибкой ширины. Это, вероятно, становится менее важным в наши дни, так как макеты с фиксированной шириной становятся все более комментариями - браузеры могут увеличивать веб-страницу, чтобы увидеть мелкий текст, а фиксированная ширина значительно облегчает управление типографикой страницы например установите ширину (в ems) для отображения идеальных девяти слов в строке независимо от того, какой размер шрифта и увеличение выбирает пользователь.

Извините, если это не похоже на ответ, но в основном предлагает отказаться от этой старой модели и рассмотреть возможность перехода к столбцам фиксированной ширины (что является совершенно новым предметом).

Answer 8

Извините, это не «ответ», а ответ на другие комментарии здесь. Эта проблема просто ошеломляет. Его очень легко выделить (т. Е. Он не имеет никакого отношения к количеству таблиц стилей) и не имеет надлежащего «решения», поскольку нет способа добиться желаемого рендеринга.

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