John Resig, bapak jQuery, menulis artikel " Masalah Sub-Piksel di CSS ". Ada 4 div float dalam div lebar 50px, masing-masing lebarnya 25%. Namun, berbagai browser memiliki beberapa kesulitan dalam memahami 50*25 % .
.jpg)
Kemudian Steven Wittens '" CSS Sub-pixel Background Misalignments " menguji perbedaan dalam pemusatan gambar latar belakang elemen induk ketika elemen dengan lebar tetap dipusatkan secara horizontal, yang membuat kami terpesona ( demo ):
.jpg)
Yang menyedihkan adalah tidak hanya IE, tetapi juga versi yang berbeda dari setiap browser memiliki sedikit perbedaan... Untungnya, situasi ini jarang ditemui dalam pekerjaan nyata, dan ini hanya situasi yang relatif sederhana. Skenario aplikasi yang lebih umum adalah: Beberapa Halaman aktivitas anggota QQ memiliki gambar besar 1280px yang sangat lebar dan megah di tengahnya, area tengahnya adalah 980px di tengahnya, dan sebanyak mungkin bagian selain 980px dapat ditampilkan pada resolusi 1024, tidak ada bilah gulir horizontal yang muncul, lebih besar dari 1024 Jika resolusinya lebih besar, seluruh gambar akan ditampilkan. Mari kita lihat demo sederhana (untuk memudahkan penemuan dan ringkasan masalah, gambar besar bagian luar memiliki lebar 400px (sesuai dengan 1280px di atas), 200px tengah dilubangi (sesuai dengan 980px di atas), dan gambar tengah lebarnya 200px):
lihat salinan biasa ke cetak papan klip?
<!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 ">
<kepala>
<meta content="text/html; charset=utf-8" http-equiv="Jenis Konten" />
<title>Sub-Piksel</title>
<gaya tipe="teks/css">
isi, div, p{margin:0;padding:0;}
badan{text-align:center;}
tombol{margin:1em;padding:0 1em;}
#pg, body{background-position:center 0;background-repeat:no-repeat;}
body{gambar-latar belakang:url('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{margin:0 auto;width:200px;height:200px;background-image:url('/u/info_img/2010-03/24/1749_004.jpg');}
</gaya>
</kepala>
<tubuh>
<div id="pg"></div>
</tubuh>
</html>