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

У меня есть одна страница, элементы div которой выровнены с помощью JavaScript. JavaScript просто проверяет набор элементов div, чтобы найти максимальную offsetWidth, а затем устанавливает ширину всех элементов div. быть максимальным 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 приводит к неправильной настройке width для встроенного стиля.

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


javascript dom firefox width offsetwidth
person Morgan Cheng    schedule 12.03.2009    source источник

Ответы (1)


arrow_upward
12
arrow_downward

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

person eyelidlessness    schedule 12.03.2009