2009-01-13 12 views
11

Tengo un bloque de código preformateado (<pre>) que se desborda horizontalmente por lo que hay una barra de desplazamiento horizontal para permitir que el usuario vea el contenido.Cómo evitar que las barras de desplazamiento se superpongan al contenido?

overflow: auto; 

Sin embargo, en IE7 (tal vez otras versiones de IE), la barra de desplazamiento se solapa con la última línea de mi contenido (lo cual es especialmente irritante cuando sólo hay una línea de contenido).

He intentado la solución enumerada here, pero no funcionó.

La única solución que funciona es usar

overflow: scroll; 

que añade una barra de desplazamiento a todos mis secciones formato previo que es horrible.

Nota: Funciona bien en Firefox 3 y Google Chrome.


actualización

he encontrado una solución (véase mi respuesta), pero si alguien encuentra una manera de no tener el relleno fea en cada sección con formato previo en IE7, eso sería perfecto.

Respuesta

10

Justo después de publicar la pregunta, pensé en comprobar si stackoverflow manejaba eso (lo cual hace).

Me tomó un vistazo a la hoja de estilo y encontramos este:

padding-bottom: 19px!ie7; 

(así, utilizan 20 píxeles, pero 19 se veía mejor).

Añade un relleno inferior solo para IE7, lo que hace que todas las secciones preformateadas sin barra de desplazamiento se vean un poco raras debido al gran relleno, pero al menos puedo ver el contenido (y también se ve raro en stackoverflow).

Lo siento por hacer una pregunta demasiado rápido.

+0

podría colocar padding-bottom en un IE de sólo hoja de estilo; esta página considera '! ie7' un truco: http: // css-tricks.com/how-to-create-an-ie-only-stylesheet/ –

1

Envuelva su PRE en un DIV con algunos márgenes adicionales.

0

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ñas piezas 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.

+0

Eso agregará una barra de desplazamiento a cada DIV que mencioné que no quería. – mbillard

+0

Solo agrega style = "overflow: scroll;" al div en lugar de especificarlo en la hoja de estilos CSS para todos los DIV. –

2

complemento 'padding-bottom: 20px' a la etiqueta pre

+0

Esto agrega el relleno feo en cada navegador, solo tengo que arreglarlo para IE7. – mbillard

Cuestiones relacionadas