John Resig บิดาแห่ง jQuery เขียนบทความ " ปัญหาพิกเซลย่อยใน CSS " มี 4 float div ใน div แบบกว้าง 50px แต่ละอันมีความกว้าง 25% อย่างไรก็ตาม เบราว์เซอร์ต่างๆ มีความเข้าใจที่ยุ่งเหยิงบางประการที่ 50*25 % ( สาธิต ):
.jpg)
จากนั้น Steven Wittens ' " CSS Sub-pixel Background Misalignments " ทดสอบความแตกต่างในการตั้งศูนย์กลางของภาพพื้นหลังขององค์ประกอบหลักเมื่อองค์ประกอบที่มีความกว้างคงที่อยู่กึ่งกลางแนวนอน ซึ่งทำให้เราตื่นตา ( demo ):
.jpg)
สิ่งที่น่าหดหู่คือไม่เพียงแต่ IE เท่านั้น แต่ยังรวมถึงเวอร์ชันที่แตกต่างกันของแต่ละเบราว์เซอร์ด้วย ความแตกต่างเล็กน้อย... โชคดีที่สถานการณ์นี้ไม่ค่อยพบในการทำงานจริง และเป็นเพียงสถานการณ์ที่ค่อนข้างง่าย สถานการณ์ทั่วไปของแอปพลิเคชันคือ: บางส่วน หน้ากิจกรรมของสมาชิก QQ มีรูปภาพขนาดใหญ่ที่กว้างและสวยงามมากขนาด 1280px ตรงกลาง พื้นที่ตรงกลางคือ 980px ตรงกลาง และเนื่องจากส่วนอื่น ๆ ที่ไม่ใช่ 980px สามารถแสดงได้ที่ความละเอียด 1024 จึงไม่แถบเลื่อนแนวนอนปรากฏขึ้น มีขนาดใหญ่กว่า 1024 หากความละเอียดมีขนาดใหญ่ขึ้น รูปภาพทั้งหมดจะแสดงขึ้น มาดูการสาธิตง่ายๆ กัน (เพื่ออำนวยความสะดวกในการค้นหาและการสรุปปัญหา รูปภาพขนาดใหญ่ด้านนอกจะมีความกว้าง 400px (ตรงกับ 1280px ด้านบน) ส่วนตรงกลาง 200px จะกลวงออก (ตรงกับ 980px ด้านบน) และ ภาพกลางกว้าง 200px):
ดู plaincopy ไปที่ clipboardprint หรือไม่
<!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 ">
<หัว>
<meta content="text/html; charset=utf-8" http-equiv="ประเภทเนื้อหา" />
<title>พิกเซลย่อย</title>
<style type="text/css">
เนื้อความ, div, p{ระยะขอบ:0;ช่องว่างภายใน:0;}
เนื้อความ {จัดข้อความ: กึ่งกลาง;}
ปุ่ม {ระยะขอบ: 1em; การขยาย: 0 1em;}
#pg เนื้อความ {ตำแหน่งพื้นหลัง: กึ่งกลาง 0; พื้นหลังซ้ำ: ไม่ซ้ำ;}
ร่างกาย {พื้นหลังภาพ: url ('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{ระยะขอบ:0 อัตโนมัติ;ความกว้าง:200px;ความสูง:200px;พื้นหลัง-ภาพ:url('/u/info_img/2010-03/24/1749_004.jpg');}
</สไตล์>
</หัว>
<ร่างกาย>
<div id="pg"></div>
</ร่างกาย>
</html>