Comment un fragment d'URL peut-il affecter une mise en forme CSS?

Question

Comparez ces 3 URL (regardez la barre de navigation supérieure dans chaque cas):

1. http://fast.kirkdesigns.co.uk/blog
2. comme ci-dessus mais avec le fragment d'URL #navigation
3. comme ci-dessus mais avec le fragment d'URL # node-2655

Notez que la seule différence est le fragment d'URL à la fin.

Les deux premières pages s'affichent parfaitement (dans Firefox au moins). C'est le troisième où réside le problème. Le fragment # node-2655 pousse la barre de navigation supérieure en haut de l'écran. Lorsque vous remontez ensuite en haut de la page, la barre de navigation a été coupée en deux. Cela se produit lors de l’utilisation de tout fragment d’URL entraînant la sortie de la barre de navigation de la fenêtre initiale lors du premier chargement de la page.

Comment un fragment d’URL peut-il affecter la présentation CSS comme ceci?!

LA SOLUTION: comme suggéré ci-dessous, la suppression du débordement: masqué sur l'élément conteneur qui contenait la barre de navigation a résolu le problème. J'aimerais bien comprendre pourquoi!

Answer 1

Supprimez le dépassement : masqué le #main dans css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

Je dirais que c'est un bug de rendu dans FireFox comme c'est bien dans Opera. Il ne devrait pas y avoir de toute façon une ancre changerait le CSS comme vous le dites (sauf si vous utilisez jQuery ou quelque chose du genre).

Answer 3

J'ai aussi ce problème et je pense pouvoir voir ce qui se passe.

La " colonne " bloc avec la marge massive (5678 pixels) et le rembourrage rend ce bloc très grand. Dans les navigateurs autres que Firefox, les valeurs positives et négatives s’annulent, mais FF le rend vraiment aussi grand.

FF sait également que les deux s'annulent, mais semble examiner le remplissage de 5678px et décide que le bloc de colonnes est situé au bas du bloc #wrapper. C'est un débordement - et avec le débordement défini sur auto sur #wrapper, vous voyez la taille réelle de #wrapper avec une barre de défilement sur le côté.

Lorsque le débordement est défini sur masqué, FF supprime la barre de défilement, mais semble toujours faire défiler le contenu de #wrapper afin que l’élément pointé par le fragment se trouve en haut de la page. C'est un comportement normal pour les liens de fragments dans les blocs défilables, mais comme il n'y a pas de barre de défilement, vous ne pouvez plus faire défiler le contenu, il semble donc que la mise en page ait été effectuée par le fragment.

En bref, je suppose que FF exploite une barre de défilement invisible dans cet exemple. Cela pourrait être considéré comme un bug, mais c'est probablement un comportement correct. Pouvoir faire défiler le contenu de haut en bas dans un bloc de taille fixe non surchargé à l'aide de fragments d'URL est une technique qui peut être utilisée efficacement pour implémenter des "curseurs" d'image. qui fonctionnent même en l'absence de JavaScript.

J'espère que ça aide. Cela me laisse perplexe depuis des années et cette explication m’a soudainement frappé. Ma solution actuelle consiste à utiliser jQuery " faites défiler jusqu'à " plugin pour faire défiler toute la page jusqu’au fragment, car cela semble empêcher le contenu de #wrapper de défiler en interne.

Vous pouvez également prendre "display: hidden". #wrapper, mais votre page se termine sur un demi-mile de long.

Answer 4

Je signale simplement qu'il peut y avoir un étrange héritage parmi les 30+ feuilles de style liées à la tête. Il se peut que non non plus, et il s’agit probablement d’un bogue de rendu (probablement lié au style : target ) suggéré par Dan. Je pensais simplement que cela valait la peine de souligner que si vous avez plus de trente feuilles de style, vous allez probablement commencer à voir une certaine étrangeté, peu importe ce qui pourrait se passer.

Answer 5

La raison en est que la colonne avec le grand remplissage a développé son conteneur, mais le développement est alors masqué mais débordé: hidden; mais avec l'utilisation du fragment, il est défilé dans la position du fragment, coupant efficacement tout ce qui se situe au-dessus de cela. Vous pouvez utiliser javascript et définir scrollTop sur 0 pour le ramener à la position normale.

Fondamentalement, un cas étrange que les navigateurs ne semblent pas gérer très bien.

Answer 6

Désolé, ce n'est pas une " réponse, " Bien que ce soit une réponse aux autres commentaires ici. Ce problème est époustouflant. Il est très facile à isoler (c’est-à-dire qu’il n’a rien à voir avec le nombre de feuilles de style) et n’a pas de "solution" appropriée. car il n’existe aucun moyen d’obtenir le rendu souhaité.

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

Tout comme note complémentaire, la technique ci-dessus est généralement utilisée pour fournir des dispositions de largeur multiple mulit-column. Cela devient probablement moins important de nos jours, car les mises en page de largeur fixe deviennent de plus en plus de commentaires - les navigateurs peuvent agrandir la page Web pour voir de petits textes, et la largeur fixe facilite beaucoup le contrôle de la typographie d'une page, par exemple définissez la largeur (en em) pour afficher les neuf mots idéaux par ligne, quelle que soit la taille et le grossissement de la police choisis par l'utilisateur.

Désolé si cela ne vous semble pas être une réponse, mais cela suggère en principe de supprimer cet ancien modèle et d’envisager de passer aux colonnes de largeur fixe (ce qui est un tout nouveau sujet).

Answer 8

J'ai pu résoudre ce problème avec du javascript pour faire défiler le corps jusqu'à la position où l'élément masqué de débordement était déplacé.

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