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

Question

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

<Ол>

http://fast.kirkdesigns.co.uk/blog

как указано выше, но с фрагментом URL #navigation

как выше, но с фрагментом URL # node-2655

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

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

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

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

Answer 1

Удалите переполнение : скрытое в #main в css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

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

Answer 3

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

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

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

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

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

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

Вы также можете выбрать & display: скрытый " off #wrapper, но ваша страница заканчивается в полумиле в длину.

Answer 4

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

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) для отображения идеальных девяти слов в строке независимо от того, какой размер шрифта и увеличение выбирает пользователь.

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

Answer 8

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

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