¿Cómo puede afectar un fragmento de URL a un diseño CSS?

Question

Compare estas 3 URL (mire la barra de navegación superior en cada caso):

1. http://fast.kirkdesigns.co.uk/blog
2. como arriba pero con el fragmento de URL #navigation
3. como arriba pero con el fragmento de URL # node-2655

Tenga en cuenta que la única diferencia es el fragmento de URL al final.

Las dos primeras páginas se muestran absolutamente bien (al menos en Firefox). Es el tercero donde radica el problema. El fragmento # node-2655 empuja la barra de navegación superior fuera de la parte superior de la pantalla. Cuando luego se desplaza hacia arriba hasta la parte superior de la página, la barra de navegación se ha reducido a la mitad. Esto sucede cuando se usa cualquier fragmento de URL que hace que la barra de navegación esté fuera de la ventana de visualización inicial cuando se carga la página por primera vez.

Entonces, ¿cómo puede el uso de un fragmento de URL afectar el diseño de CSS como este?

LA SOLUCIÓN: como se sugiere a continuación, eliminar el desbordamiento: oculto en el elemento contenedor que contenía la barra de navegación solucionó el problema. ¡Aunque me encantaría entender por qué!

Answer 1

Elimine el desbordamiento : oculto en #main en css_75afd7072eaf4096aaebf60674218e31.css

Answer 2

Diría que es un error de renderizado en Firefox ya que está bien en Opera. De todos modos, no debería haber un ancla que cambiara el CSS como usted dice (a menos que esté usando jQuery o algo así).

Answer 3

También tengo este problema y creo que puedo ver lo que está sucediendo.

La " columna " El bloque con el margen masivo (5678 píxeles) y el relleno hacen que ese bloque sea muy alto. En los navegadores que no sean Firefox, los valores positivos y negativos se cancelan entre sí, pero FF realmente lo hace tan alto.

FF también sabe que los dos se cancelan entre sí, pero parece mirar el relleno de 5678px y decide que el bloque de la columna está sobresaliendo en la parte inferior del bloque #wrapper. Esto es desbordamiento, y con el desbordamiento configurado en automático en #wrapper, verá el tamaño real de #wrapper con una barra de desplazamiento en el lateral.

Con el desbordamiento establecido en oculto, FF quita la barra de desplazamiento, pero aún parece desplazar el contenido de #wrapper para que el elemento al que apunta el fragmento esté en la parte superior de la página. Este es el comportamiento normal para enlaces de fragmentos en bloques desplazables, pero como no hay barra de desplazamiento, no puede volver a desplazar el contenido hacia abajo, por lo tanto, parece que el fragmento ha afectado el diseño.

Entonces, en resumen, sospecho que FF está operando una barra de desplazamiento invisible en este ejemplo. Eso podría considerarse un error, pero probablemente sea un comportamiento correcto. Poder desplazar el contenido hacia arriba y hacia abajo dentro de un bloque de tamaño fijo no desbordado utilizando fragmentos de URL, es una técnica que se puede usar de manera efectiva para implementar controles deslizantes de imagen. que funcionan incluso en ausencia de JavaScript.

Espero que ayude. Esto me ha estado desconcertando durante años, y esta explicación me sorprendió de repente. Mi solución actual para esto es usar jQuery " desplazarse a " complemento para desplazar toda la página hacia el fragmento, ya que esto parece evitar que el contenido de #wrapper se desplace internamente.

También puede tomar " display: hidden " fuera de #wrapper, pero su página luego termina media milla de largo.

Answer 4

Solo señalaré que puede haber alguna herencia extraña de las más de 30 hojas de estilo vinculadas en la cabeza. Puede que tampoco, y probablemente sea un error de representación (posiblemente relacionado con el estilo : target ) que Dan sugirió. Sentí que valía la pena señalar que si tienes más de treinta hojas de estilo, es probable que comiences a ver algo extraño, pase lo que pase.

Answer 5

La razón es que la columna con el gran relleno ha expandido su contenedor, pero la expansión se oculta pero se desborda: oculta; pero con el uso del fragmento se desplaza a la posición del fragmento, cortando efectivamente cualquier cosa por encima de eso. Puede usar javascript y establecer scrollTop en 0 y volverlo a la posición normal.

Básicamente, un caso de borde extraño que los navegadores no parecen manejar muy bien.

Answer 6

Lo siento, esta no es una " respuesta, " aunque es una respuesta a los otros comentarios aquí. Este problema es simplemente asombroso. Es muy fácil de aislar (es decir, no tiene nada que ver con la cantidad de hojas de estilo), y no tiene una solución adecuada. ya que no hay forma de lograr el renderizado deseado.

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

Como una nota al margen, la técnica anterior se usa generalmente para proporcionar diseños de columnas múltiples de ancho flexible. Esto probablemente se está volviendo menos importante en estos días, ya que los diseños de ancho fijo se están convirtiendo en muchos más comentarios: los navegadores pueden ampliar la página web para ver texto pequeño, y el ancho fijo hace que sea mucho más fácil controlar la tipografía de una página, p.ej establezca el ancho (en ems) para mostrar las nueve palabras ideales por línea, independientemente del tamaño de fuente y la ampliación que elija el usuario.

Lo siento si eso no suena como una respuesta, pero básicamente sugiere descartar este viejo modelo y considerar pasar a columnas de ancho fijo (que es un tema completamente nuevo).

Answer 8

Pude resolver esto con algunos javascript para desplazar el cuerpo a la posición en la que se desplazó el elemento oculto de desbordamiento.

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