场景：一张1400像素的背景图片，把这张背景图片作为居中显示，其中body的宽度为950并居中显示。在正常情况下，背景图片和body部分的内容是对齐的。经测试：IE7/8/9/10,opera,火狐都没有问题，但是在IE6、safari、Chrome谷歌浏览器背景图片居中有1像素的偏移。
实验
最后通过各种分辨率，以及不停的resize浏览器视窗，得出以下规律（所有前提是背景大图为1210px的偶数尺寸，不建议很蠢的用奇数的尺寸去导致所有浏览器都有问题）：1) IE6浏览器：还算比较有节操的，只有当页面宽度大于背景图片宽度（本例当中为1210px）且页面宽度为奇数尺寸时才会出现内容区域向左偏差1px的现象。2） Chrome浏览器：这家伙自作聪明，很没节操，一会儿向左一会儿向右偏移，搞不清楚总有问题。后来多次对比就是当页面宽度大于背景图宽度且页面宽度为奇数时，内容区域向左偏移1px（这个就很没节操只是偶尔显现，大部分时间没出现）；当页面宽度小于背景图宽度且页面宽度为奇数时，内容区域向右偏移1px（这种现象是必现的）。大概总结出来就以上两点问题。
查资料分析一下原因（没有官方定论，只是YY）。从大家讨论的结果当中看，应该是webkit内核的浏览器的一个通病，当页面宽度为奇数时，background-position:50% 0;结合其与背景图的宽度一起计算出图片应该定位的位置：背景图x坐标=(背景图所在的元素宽度-背景图宽度)*50%因此，可能浏览器器在处理这个奇数宽度带来的0.5像素的宽度时存在四舍五入的现象，但是对于这个规则的处理就如现象的描述一样。当页面宽度小于背景图宽度时，则存在负的0.5，当页面宽度大于背景图宽度时则存在正的0.5，所以总是出现了要么入，要么舍带来的偏移。而这个入与舍，IE6与chrome则表现出了不同的原则，也就有了以上不同的现象。而正常的浏览器我估计能更加精确的定位吧，至少按照这位哥的描述应该是：“While 1px isn’t the end of the world, it can really hurt a design!”
解决方案
给IE6浏览器和webkit内核的浏览器一个专门的hack即可，区别代码案例
body{
background:red; /*普通浏览器*/
_background:green; /*IE6浏览器*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {body{background:blue;}} /*webkit内核的浏览器*/
