html - plantilla - ¿Cómo evitar que las barras de desplazamiento se superpongan al contenido?
plantilla divi wordpress gratis (4)
Tengo un bloque de código preformateado (<pre>) que se desborda horizontalmente, por lo que hay una barra de desplazamiento horizontal que permite al usuario ver el contenido.
overflow: auto;
Sin embargo, en IE7 (quizás otras versiones de IE), la barra de desplazamiento se superpone a la última línea de mi contenido (lo cual es especialmente irritante cuando solo hay una línea de contenido).
He intentado con la solución que se incluye aquí , pero no funcionó.
La única solución que funciona es usar
overflow: scroll;
que agrega una barra de desplazamiento a todas mis secciones preformateadas, lo que es simplemente horrible.
Nota: Funciona bien en Firefox 3 y Google Chrome.
Actualizar
He encontrado una solución (ver mi respuesta), pero si alguien encuentra la manera de no tener el relleno feo en cada sección preformateada en IE7, sería perfecto.
Envuelva su PRE en un DIV con algunos márgenes adicionales.
Justo después de publicar la pregunta, pensé en comprobar si manejaba eso (que es lo que hace).
Eché un vistazo a la hoja de estilo y encontré esto:
padding-bottom: 19px!ie7;
(Bueno, usan 20px, pero 19 se veían mejor).
Agrega un relleno inferior solo para IE7, lo que hace que cada sección preformateada sin una barra de desplazamiento parezca un poco rara debido al gran relleno, pero al menos puedo ver el contenido (y se ve raro también en ).
Perdón por hacer una pregunta demasiado rápido.
agregar ''relleno-inferior: 20px'' a la etiqueta previa
Envuelva su PRE en un DIV y aplique el overflow: scroll; al DIV . Asegúrese de utilizar <div style="overflow: scroll; width=''...''; height=''...'';"> o asigne una clase al div para asegurarse de que no todos obtengan una barra de desplazamiento.
Por ejemplo, en mi blog, uso <div style="overflow: scroll; width: 100%;"> para pequeños trozos de código para que las personas puedan desplazarse horizontalmente y div crecerá a la altura correcta. Para piezas más largas, también asigno una altura para reducir la longitud de todo el artículo; las personas también pueden desplazarse verticalmente.
También puede probar <div style="overflow: scroll; overflow-y: hidden; width: 100%;"> para obtener solo una barra de desplazamiento horizontal (y no ambas y una de ellas está deshabilitada). Tal vez <div style="overflow-x: scroll; width: 100%;"> funciona también.