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）：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表