Джон Ресиг, отец jQuery, написал статью « Проблемы субпикселей в CSS ». В div шириной 50 пикселей есть 4 элемента div с плавающей запятой, каждый шириной 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>
<style type="text/css">
тело, div, p{маржа: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>