Ширина элемента DOM может быть не целочисленной? - PullRequest
Новая
       12

Ширина элемента DOM может быть не целочисленной?

8 голосов
/ 12 марта 2009

У меня есть одна страница, элементы div которой выровнены с помощью JavaScript. JavaScript просто проверяет набор элементов div, чтобы найти значение max offsetWidth , а затем устанавливает для всех элементов div значение * width как максимальное offsetWidth . Он прекрасно работает в большинстве браузеров и локалей, но не работает на французском языке в Firefox на Mac. В этом случае содержимое div-оберток. 

<div id="divFoo">
    Heure de d&#233;but :
</div>

для приведенного выше HTML, под кодом кода "79". 

javascript:alert(document.getElementById('divFoo').offsetWidth);

но ниже кодового отчета "79.1333px". 

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

Разрыв между 79.1333 и 79 приводит к неправильным значениям ширина для встроенного стиля.

Раньше я думал, что offsetWidth и width всегда должны быть целыми числами. Есть ли способ сделать offsetWidth округленным правильно?

1 Ответ

12 голосов
/ 12 марта 2009

Существует различие между правилом стиля 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 как есть, даже если они не являются целочисленными.

...