Sub-Pixel Problems in CSS

【 tulaoshi.com - Web开发 】

jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》，一个50px宽的div中有4个float的div，每个宽25%，然而各个浏览器对50*25%的理解有些纠结（demo）：

随后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