|
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）：
view plaincopy to clipboardprint?
<!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" />
<title>Sub-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-content/uploads/2010/3/1749_003.jpg');}
#pg{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_004.jpg');}
</style>
</head>
<body>
<div id="pg"></div>
</body>
</html>
出处：腾讯Webteam
责任编辑：bluehearts
上一页 下一页 Sub-Pixel Bug?! [2]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 Sub-Pixel Bug?! [1]
第 2 页 
