IE/Chrome背景图片居中1px偏移解决方法

最近在支持行业运营的一个推广页面，遇到了非常规的页面banner图居中的问题，为了解决此问题，做了简单的测试，做了一个小结，为经常做大促页面的兄弟姐妹们提供参考解决方案。

1. 首先来看看现象。最经典的页面如下图
   
2. 从图中可以看到本页面为经典的顶部大图通栏，尺寸为1210px，但是为了兼顾所有分辨率，所以作为背景图片居中处理。内容区域为常用的经典栅格布局990px，设置margin:0 auto;大概的伪代码结构如下：
3.  XHTML

   1 2 3 4

   <div id=”content”>     <div class=”top” style=”height:200px;background:url(bg.png) no-repeat 50% 0;”>顶部通栏banner区域</div>     <div class=”main” style=”width:990px;margin:0 auto;”>内容区域</div> </div>

   理论上内容区域应该和上方背景图对齐。但是理论和现实总有差距的，在chrome和IE以及safari浏览器下面经常可以发现两部分并没有对齐，直接导致了很明显的一条线错位，所以不容忽视。但是，所有的又是不规律的，并不是必现，所以还是需要好好归纳一下现象。

4. 归纳现象规律。以本案例为例子，经过测试发现：IE7/8/9/10居中问题处理的都很不错，都能够正常的显示，两部分吻合的很好；但是在IE6和高贵的chrome下面居然出现了问题（其他高富帅的opera和safari没测试，但是通过搜集网上现象，貌似safari也有和chrome一样的问题，opera没问题）。最后通过各种分辨率，以及不停的resize浏览器视窗，得出以下规律（所有前提是背景大图为1210px的偶数尺寸，不建议很蠢的用奇数的尺寸去导致所有浏览器都有问题）：1)  IE6浏览器：还算比较有节操的，只有当页面宽度大于背景图片宽度（本例当中为1210px）且页面宽度为奇数尺寸时才会出现内容区域向左偏差1px的现象。2） Chrome浏览器：这家伙自作聪明，很没节操，一会儿向左一会儿向右偏移，搞不清楚总有问题。后来多次对比就是当页面宽度大于背景图宽度且页面宽度为奇数时，内容区域向左偏移1px（这个就很没节操只是偶尔显现，大部分时间没出现）；当页面宽度小于背景图宽度且页面宽度为奇数时，内容区域向右偏移1px（这种现象是必现的）。大概总结出来就以上两点问题，也去网上搜罗了一下，以下同学也在呐喊，也做了一些原因分析：[1] http://stackoverflow.com/questions/6454019/background-center-with-chrome-bug[2] http://stackoverflow.com/questions/9752201/how-do-i-fix-1px-margin-on-google-chrome[3] http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
5. 查资料分析一下原因（没有官方定论，只是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!”
6. 提供解决方案。每个地方都有人提供了各种尝试。例如把背景图设为奇数，但是此举绝对不靠谱，不建议尝试，当然如果你的背景图能够足够宽到跨越一切分辨率的时候可以采纳，例如5000px；或者如果是中间掏空的那种背景图可以掏空的时候比内容区左右各少1px，这个还可以；再或者html{margin-left:1px;}，一样不是很靠谱，况且还有白边。。。经过上面的讨论以及各种尝试，目前个人觉得最好的/最没办法的通用解决方法就是一下这种了，如果你觉得还有更好的，欢迎交流。—————js专门hack—–！！！。。。对于IE6当页面宽度大于背景图宽度时，给内容区域增加一个padding-left:1px;的属性，其他情况去除这个属性。对于webkit内核的浏览器，则当页面宽度小于背景图宽度时，给背景图所在元素增加background-position:49.999% 0;属性；当页面宽度大于背景图宽度时则给背景图所在元素增加background-position:50.001% 0;当然要给浏览器增加resize监听事件，每次改变都要调整一下。以上hack不用区分页面宽度的奇数偶数情况都能正常显示了，不信你看看！贴一下基本代码：

var $ = jQuery,
isIE6 = $.browser.msie && $.browser.version == ‘6.0’,
isWebkit = $.browser.webkit,
fixDiv;
function fixWidthBug(){
var _w=$(document).width();
if(isIE6){
if(_w>1210){
fixDiv.css(‘padding-left’,’1px’);
}else{
fixDiv.css(‘padding-left’,’0px’);
}
}
if(isWebkit){
if(_w>1210){
fixDiv.css(‘background-position’,’50.001% 0′);
}else{
fixDiv.css(‘background-position’,’49.999% 0′);
}
}
return ;
}
function initPageWidth(){
if(!(isIE6 || isWebkit)){
return ;
}
if(isIE6){
fixDiv = $(‘div.backgroundimage-els’);
}
if(isWebkit){
fixDiv = $(‘div.content-els’);
}
$(window).on(‘resize’,fixWidthBug);
fixWidthBug();
}
initPageWidth();

文章转载请注明：IE/Chrome背景图片居中1px偏移解决方法-汇聚素材网