|
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，各瀏覽器的不同版本也有些許差異… 還好，現(xiàn)實工作中很少會碰到這種情形，遇到了也只是一個相對簡單的情形，比較典型的應用場景是：某些QQ會員活動類的頁面，背景一幅很寬大宏偉的1280px大圖居中，中間區(qū)域980px居中，1024分辨率下980px外的部分能顯示多少就顯示多少，不出現(xiàn)橫向滾動條，大于1024的分辨率則大圖全部顯示。 下面來看個簡單的demo（為了方便發(fā)現(xiàn)及總結問題，外圍大圖寬400px（對應上面的1280px），中間200px掏空（對應上面的980px），中間圖寬200px）：
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="<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]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 Sub-Pixel Bug?! [1]
第 2 頁 
