|
拖動瀏覽器邊緣改變?yōu)g覽器窗口的寬度，可以看到在某些時候body和#pg在右側(cè)的交界處會有1px的空隙，這個問題存在于IE6/Chrome3/Safari4中。 以搜集IE BUG聞名的PIE（Position Is Everything）也有一篇《IE Background Positioning Bug》，不過其中的外層元素是固定寬度，對我們用處也不大。同事77總結(jié)了兩個方法：
- 切圖時body和#pg的圖片不要分開，合在一張大圖上，然后對body寫背景圖片居中，圖片太大的話則切為多個相同寬度的小圖，通過嵌套多個div來寫，比如:
<div class="bg1">
<div class="bg2">
<div class="bg3">
<div id="pg"></div>
</div>
</div>
</div>
- body大圖中間挖空區(qū)域多留幾個像素，比如現(xiàn)在是200px，切圖時為198px，兩側(cè)各多留1p
方法1在多數(shù)情況下很完美，不過也有某些個案不能使用這種方法；方法2對于body和#pg交界處比較淡化的圖片來說非常適合，比如ISD Webteam博客的關(guān)于頁面，不過有些時候交界處這1px會銜接不自然得非常明顯，是我們這些追求完美的頁面重構(gòu)工程師所不能容忍的。 下面我們改變點結(jié)構(gòu)來具體分析一下（注：此例為臨時用例，下文中提到的body/#pg與之無關(guān)）：
<!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]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 Sub-Pixel Bug?! [2]
