2011-05-01 15 views
6

A partir de:¿Por qué obtengo una barra de desplazamiento horizontal para el ancho: 100% en cromo?

html, body 
{ 
    padding: 0; 
    width: 100%; 
    font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
} 

Chrome decide que el ancho debe ser 1600px, que es más ancha que mi pantalla actual, por no hablar de la ventana actual Chrome. Estoy seguro de que esta es una castaña vieja, pero no encuentro el árbol correcto.

He publicado un ejemplo completo de git: //github.com/bimargulies/css-mystery.git.

Una nota: Mi macbook estaba conectado a un monitor muy amplio, y ahora no. El 1600px me parece estar relacionado con eso, pero no sé cómo hacerlo desaparecer excepto para reiniciar.

En las herramientas de cromo devo, mirando a los estilos eficaces para el, veo:

width: 1600px; 
    html, body - 100% 

Que 1600 es muy misterioso. Y esto es después de un reinicio.

EDITAR de bingo: enterrado en el main.css hoja de estilos, de otra persona que trabajo 'con', fue 'minWidth: 100em;' en cuerpo. Uy.

+0

No-repro en este violín en Chrome 10: http://jsfiddle.net/kjzBQ/ ¿Funciona el violín para usted o también se rompe? –

+1

@Pekka: tiene "CSS normalizado" marcado. – thirtydot

+0

@thirty ah, ya veo! ¿Es eso una característica nueva, o he estado pasando por alto todo el tiempo? Hubo otro caso hoy en que distorsionó los resultados. –

Respuesta

2

Para el registro, creo que es mejor tener la explicación en una respuesta.

No había otra manera cláusula CSS bajar el archivo:

body 
{ 
    minWidth: 100em; 
} 

Yo no lugar, y la caja de Chrome 'Estilos Computarizada' no incluye esto en la 'explicación' de la 1600px en el de la misma manera que incluye los estilos width.

8

Debe agregar margin: 0 para eliminar el valor predeterminado margin en el elemento body.

¿Estás seguro de que necesitas width: 100%?

html y body son por defecto "ancho completo" por ser block -niveles de nivel.

+0

No. El contenido sigue siendo ancho: 1600px según las herramientas de desarrollo de Chrome, mucho más amplio que el espacio disponible en pantalla. Todo lo que sucedió es que el margen izquierdo desapareció. – bmargulies

+0

@bmargulies que suena raro, me funciona perfectamente si aplico el consejo de @thirtydot. ¿Tienes dos pantallas? ¿Cuál es el ancho de su pantalla? ¿Estás 100% seguro de que no tienes ningún elemento dentro de la página que lo obligue a estirar? –

+0

@bmargulies: http://fiddle.jshell.net/kjzBQ/2/show/light/ + Developer Tools me muestra que los elementos 'html' y' body' son tan amplios como mi ventana: http: // i .imgur.com/8ze0F.png - Creo que hay algo más que sucede aquí: o – thirtydot

Cuestiones relacionadas