拖动浏览器边缘改变浏览器窗口的宽度,可以看到在某些时候body和#pg在右侧的交界处会有1px的空隙,这个问题存在于IE6/Chrome3/Safari4中。 以搜集IE BUG闻名的PIE(Position Is Everything)也有一篇《IE Background Positioning Bug》,不过其中的外层元素是固定宽度,对我们用处也不大。同事77总结了两个方法:
- 切图时body和#pg的图片不要分开,合在一张大图上,然后对body写背景图片居中,图片太大的话则切为多个相同宽度的小图,通过嵌套多个div来写,比如:
<div class="bg1"> <div class="bg2"> <div class="bg3"> <div id="pg"></div> </div> </div> </div>
- body大图中间挖空区域多留几个像素,比如现在是200px,切图时为198px,两侧各多留1p
方法1在多数情况下很完美,不过也有某些个案不能使用这种方法;方法2对于body和#pg交界处比较淡化的图片来说非常适合,比如ISD Webteam博客的关于页面,不过有些时候交界处这1px会衔接不自然得非常明显,是我们这些追求完美的页面重构工程师所不能容忍的。 下面我们改变点结构来具体分析一下(注:此例为临时用例,下文中提到的body/#pg与之无关):
<!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, #hd{background-position:center 0;background-repeat:no-repeat;} #pg{background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_003.jpg');} #hd{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 id="hd"></div> </div> <button id="sum">+1</button><button id="substruction">-1</button> <p>#pg宽度为<strong id="current"></strong>px</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/ jquery.min.js"></script> <script> $(document).ready(function(){ var pg = $('#pg'); var current = $('#current'); function getWidth(){ current.text(pg.width()); } getWidth(); $(window).resize(getWidth); $('#sum').click(function(){ pg.width(pg.width() + 1); getWidth(); }); $('#substruction').click(function(){ pg.width(pg.width() - 1); getWidth(); }); }) </script> </body> </html>
出处:腾讯Webteam
责任编辑:bluehearts
上一页 Sub-Pixel Bug?! [1] 下一页 Sub-Pixel Bug?! [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|