jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》，一个50px宽的div中有4个float的div，每个宽25%，然而各个浏览器对50*25%的理解有些纠结（demo）：
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）
随后Steven Wittens的《CSS Sub-pixel Background Misalignments》，测试了固定宽度的元素水平居中时父元素背景图片居中的差异，更让我们看到眼花（demo）：
让人郁闷的是：不止IE，各浏览器的不同版本也有些许差异 还好，现实工作中很少会碰到这种情形，遇到了也只是一个相对简单的情形，比较典型的应用场景是：某些QQ会员活动类的页面，背景一幅很宽大宏伟的1280px大图居中，中间区域980px居中，1024分辨率下980px外的部分能显示多少就显示多少，不出现横向滚动条，大于1024的分辨率则大图全部显示。 下面来看个简单的demo（为了方便发现及总结问题，外围大图宽400px（对应上面的1280px），中间200px掏空（对应上面的980px），中间图宽200px）：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta content="text/html; charset=utf-8" http-equiv="Content-Type" /
titleSub-Pixel/title
style type="text/css"
body, div, p{margin:0;padding:0;}
body{text-align:center;}
button{margin:1em;padding:0 1em;}
#pg, body{background-position:center 0;background-repeat:no-repeat;}
body{background-image:url('http://webteam.tencent.com/wp-contenthttp://img.warting.com/2010/3/1749_003.jpg');}
#pg{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-contenthttp://img.warting.com/2010/3/1749_004.jpg');}
/style
/head
body
div id="pg"/div
/body
/html
