John Resig, el padre de jQuery, escribió un artículo " Problemas de subpíxeles en CSS ". Hay 4 divs flotantes en un div de 50 px de ancho, cada uno con un 25% de ancho. Sin embargo, varios navegadores tienen algunos enredos en su comprensión de 50*25. % ( demostración ):
.jpg)
Luego, " Desalineaciones de fondo de subpíxeles CSS " de Steven Wittens probó la diferencia en el centrado de la imagen de fondo del elemento principal cuando el elemento de ancho fijo estaba centrado horizontalmente, lo que nos deslumbró ( demostración ):
.jpg)
Lo que es deprimente es que no solo IE, sino también las diferentes versiones de cada navegador tienen ligeras diferencias... Afortunadamente, esta situación rara vez se encuentra en el trabajo real y es solo una situación relativamente simple. Los escenarios de aplicación más típicos son: Algunos. Las páginas de actividad de los miembros de QQ tienen una imagen muy amplia y magnífica de 1280 px en el centro, el área central es de 980 px en el centro y, como gran parte de la parte que no sea 980 px se puede mostrar con una resolución de 1024, no aparece ninguna barra de desplazamiento horizontal, más grande que 1024 Si la resolución es mayor, se mostrará la imagen completa. Echemos un vistazo a una demostración simple (para facilitar el descubrimiento y el resumen de problemas, la imagen exterior grande tiene 400 px de ancho (correspondiente a los 1280 px de arriba), los 200 px del medio están huecos (correspondientes a los 980 px de arriba) y la imagen del medio tiene 200 píxeles de ancho):
¿Ver copia simple en el portapapeles?
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
cuerpo, div, p{margen:0;relleno:0;}
cuerpo{text-align:center;}
botón{margen:1em;relleno:0 1em;}
#pg, cuerpo{posición-fondo:centro 0;repetición-fondo:no-repetir;}
cuerpo{imagen-de-fondo:url('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{margin:0 auto;ancho:200px;alto:200px;imagen de fondo:url('/u/info_img/2010-03/24/1749_004.jpg');}