2010-06-22 14 views
5

Estoy arreglando errores para IE7 y este me tiene perplejo. El contenido en este page es más grande que su div. IE7 muestra correctamente una barra de desplazamiento vertical, pero el contenido está sobre la barra de desplazamiento vertical y cuando el usuario hace clic en el botón de desplazamiento, el contenido no se mueve. No me puedo imaginar lo que está causando esto. ¿Algunas ideas?IE7 Scrollbar no funciona

EDIT: He adjuntado una captura de pantalla del problema: alt text http://img31.imageshack.us/img31/605/picture5kw.png

+0

Obtenga IE8, luego inicie la herramienta de desarrollador, cambie al modo IE7, y eche un vistazo a los diferentes elementos y su CSS. Sin embargo, no había nada que me llamara la atención a primera vista ... – peirix

+0

No puedo, uso un mac y no tengo acceso a los paralelos en este momento. Además, cambié la página de ejemplo anterior a una página que necesita barras de desplazamiento. – Thomas

Respuesta

6

Creo que esto se debe a que IE7 e IE6 no están interpretando sus overflow-x y overflow-y propiedades correctamente:

#content_box { 
float:left; 
height:456px; 
margin-left:20px; 
overflow-x:hidden; 
overflow-y:scroll; 

esto es fácil de explicar por IE6: simplemente no conoce esos atributos. En cuanto a por qué no funciona en IE7, tal vez la explicación es here (Es demasiado complicado para mí entender, todavía no he comido).

creo que lo que podría funcionar (después de un examen superficial de su código , no demandarme si no lo hace) es introducir un div contenedor adicional sin establecer anchura. Eso ajustaría automáticamente cualquier elemento width: 100% dentro de él de una manera que evite los desbordamientos. (Supongo que por qué esto es un problema en el primer lugar es cuestiones modelo de caja en conjunto con margin-left: 20px, ¿verdad?)

+0

No estoy seguro de entender por qué la introducción de un nuevo div ayudaría al problema - – Thomas

+0

@Thomas Creo que su problema es que no puede controlar el desbordamiento xey en un DIV de manera confiable en IE <8. Por lo tanto, distribúyalo en dos DIVs. –

+0

@Thomas podría ser, sin embargo, que su problema se puede solucionar simplemente quitando todo el 'float: left' s. De todos modos, ¿para qué son? –

1

¿Es posible establecer el ancho de .grey_box a no modificable 510px? Porque parece que IE7 es el único que hace esto bien, ya que #content_box está configurado en 530px con 10px relleno, lo que haría todos los cuadros dentro de 520px de ancho, y eso está en algún lugar de la barra de desplazamiento. Pekka podría estar metido en algo también, con IE7 e IE6 sin implementar desbordamientos correctamente.

+0

Sí, es posible, déjame intentarlo realmente rápido. – Thomas

3

tema de desplazamiento IE7

Aplicar position: relative al recipiente que tiene la propiedad overflow-y: auto;

p. Ej.

#content_box{ 
    position: relative; 
    overflow-y:auto; 
} 

La solución anterior funciona para mí.