Существует различие между правилом стиля CSS (которое даст вам getComputedStyle()
или getStyle()
от Ренцо Куои) и фактической вычисленной шириной в пикселях, определенной пользовательским агентом.
Это отчасти связано с тем, что в CSS возможны частичные значения пикселей, но пользовательский агент должен выбрать способ рендеринга частичных пикселей (в настоящее время я считаю, что все они округляются вверх или вниз, но очень противоречивы, особенно при переводе проценты к пикселям [см. здесь ]).
Важно, чтобы эти различия существовали, особенно когда пользовательские агенты реализуют полное масштабирование страницы.
Например, я сделал тестовый пример с этим:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fractional pixels</title>
<style type="text/css" media="screen">
#fractional {
width: 17.5px;
height: 16.1333px;
background: red;
}
</style>
</head>
<body>
<div id="fractional"></div>
</body>
</html>
Увеличено за один шаг в бета-версии Safari 4, ширина CSS составляет 17,5 пикселей, а высота - 16,1333 пикселей. Но offsetWidth
составляет 21 пиксель устройства, а offsetHeight
- 19 пикселей устройства.
Короче говоря, мораль этой истории заключается в том, что если вы хотите соответствовать фактическим измерениям элемента, лучше использовать его значения CSS как есть, даже если они не являются целочисленными.