Tengo un problema con algunas etiquetas <hr> en mi sitio web.
imagen de referencia

Como puede ver en este violín muy simple https://jsfiddle.net/bau1hp9L/ the {{X0 }} las etiquetas no se procesan todas a la misma altura.

el CSS para <hr> es muy simple, por lo que no hay interferencia de otras cosas ...

hr {
  border: 0;
  height: 1px;
  background-color: #243588;
}

¿Alguna idea de por qué esto esta pasando?

Quiero que todos los <hr> tengan una altura de 1 px.

Más información:

  • No siempre es el mismo elemento que se muestra más grande si modifico el CSS dentro del navegador. p.ej. Configuré la altura en 1px y luego en 0.5px, luego en la parte posterior, etc. - ahora es una etiqueta <hr> diferente que se muestra más gruesa (desafortunadamente no se puede reproducir en jsfiddle)

  • Si configuro los <hr> 's en height: 0.5px, ahora el <hr> que era demasiado grande se renderiza con 1px de altura, como se desea, pero uno de los otros <hr> desaparece al azar

  • Si configuro height: 0.05em obtengo la altura deseada de 1 px para todos los <hr> pero me parece un poco raro ... Realmente no quiero escalar la altura dependiendo del tamaño de fuente del div principal. Quiero que tenga 1 px de altura.

    EDITAR: intente cambiar el tamaño de la ventana de vista previa de JSFiddle verticalmente; eventualmente también experimentará este comportamiento.

    ¿Alguna suposición?

  • 0
    DigitalJedi 10 may. 2019 a las 14:19

    3 respuestas

    La mejor respuesta

    Intente cambiar a "delgada" en lugar de especificar una altura de píxel:

    hr {
      border-top: thin solid #243588;
    }
    

    Eso me lo soluciona, en todos los niveles de zoom. (Sin embargo, hasta ahora solo se ha probado en Chrome y Opera). También se siente más descriptivo: no me importa cuántos píxeles sean, simplemente siempre quiero que se vea como una línea delgada.

    Encontramos (en el contexto de los cuadros de entrada) aquí y lo obtuvieron de https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc (parece que fue un error / característica introducida en Chrome 62, hace aproximadamente 2 años).

    2
    Darren Cook 16 oct. 2019 a las 08:21

    Habrá un problema con su etiqueta, cambio el código, verifíquelo.

     <head>
     </head>
     <div class="container">
     <hr>
       <section>
           Hallo
        </section>
      <hr>
        <section>
           Hallo2
        </section>
     <hr>
        <section>
           Hallo3
        </section>
    </div>
    

    Básicamente problema con el tamaño de fuente.

    2
    Ankit Verma 10 may. 2019 a las 11:40

    Lo más probable es que esté ampliando el zoom de su navegador web, y la altura de 1px a veces se escala de manera desigual, es decir, con un zoom del 150%, algunos de los píxeles de su página se duplicarán y otros no.

    Restablece la escala de zoom de tu vista al 100%.

    1
    Slawomir Chodnicki 10 may. 2019 a las 11:24