كتب جون ريسيج، والد jQuery، مقالًا بعنوان " مشاكل البكسل الفرعي في CSS ". هناك 4 أقسام عائمة في div بعرض 50 بكسل، وعرض كل منها 25%، ومع ذلك، فإن المتصفحات المختلفة بها بعض التشابك في فهمها لـ 50*25 % ( تجريبي ):
.jpg)
ثم قام ستيفن ويتنز باختبار " اختلالات خلفية البكسل الفرعي في CSS " الفرق في توسيط صورة الخلفية للعنصر الأصلي عندما تم توسيط العنصر ذو العرض الثابت أفقيًا، مما جعلنا منبهرين ( عرض توضيحي ):
.jpg)
الأمر المحبط هو أنه ليس فقط IE، ولكن أيضًا الإصدارات المختلفة من كل متصفح بها اختلافات طفيفة... لحسن الحظ، نادرًا ما يتم مواجهة هذا الموقف في العمل الحقيقي، وهو مجرد موقف بسيط نسبيًا، وسيناريوهات التطبيق الأكثر شيوعًا هي: بعض تحتوي صفحات أنشطة أعضاء QQ على صورة كبيرة واسعة جدًا ورائعة بحجم 1280 بكسل في المنتصف، والمنطقة الوسطى بحجم 980 بكسل في المنتصف، وأكبر قدر من الجزء بخلاف 980 بكسل يمكن عرضه بدقة 1024، ولا يظهر شريط تمرير أفقي، أكبر من 1024 إذا كانت الدقة أكبر، فسيتم عرض الصورة بأكملها. دعونا نلقي نظرة على عرض توضيحي بسيط (من أجل تسهيل اكتشاف المشكلات وتلخيصها، يبلغ عرض الصورة الخارجية الكبيرة 400 بكسل (الموافق 1280 بكسل أعلاه)، ويتم تجويف الوسط بمقدار 200 بكسل (الموافق 980 بكسل أعلاه)، و الصورة الوسطى بعرض 200 بكسل):
عرض نسخة عادية إلى الحافظة؟
<!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="Content-Type" />
<title>البكسل الفرعي</title>
<نمط النوع = "نص/CSS">
الجسم، شعبة، ص {الهامش: 0؛ الحشو: 0؛}
الجسم {محاذاة النص: المركز؛}
زر {الهامش: 1em؛ الحشو: 0 1em؛}
#pg، body{background-position:center 0;background-repeat:no-repeat;}
body{background-image: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');}
</نمط>
</الرأس>
<الجسم>
<div id="pg"></div>
</الجسم>
</html>