2009-03-12 5 views
8

У меня есть одна страница, элементы div которой выровнены по JavaScript. JavaScript просто проверить набор элементов DIV, чтобы найти максимальное offsetWidth, а затем установить все Div элементы ширина быть максимально offsetWidth. Он отлично работает в большинстве браузеров и локалей, но он не работает на французском языке в Firefox на Mac. В этом случае содержимое div обертывается.Ширина элемента DOM может быть нецелым?

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

для приведенного выше вышеподробнее, ниже кодового сообщения "79".

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

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

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

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

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

ответ

12

Существует разница между правилом стиля CSS (которое даст getComputedStyle() или), а также фактическая вычисленная ширина в пикселях, определяемая пользовательским агентом.

Отчасти это связано с тем, что частичные значения пикселей возможны в CSS, но пользовательский агент должен выбрать способ отображения частичных пикселей (в настоящее время я считаю, что они все округлены вверх или вниз, но очень противоречивы, особенно когда перевод процентов на пиксели [см. here]).

Важно, чтобы эти различия существовали, в частности, поскольку пользовательские агенты реализуют полномасштабное масштабирование страницы.

Например, я сделал тестовый случай с этим:

<!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 Beta, ширина CSS сообщается как 17.5px и высотой 16.1333px. Но его offsetWidth - 21 пиксель устройства, а его offsetHeight - 19 пикселей устройства.

Мощностью истории является, в общем, то, что если вы хотите сопоставить фактические размеры элемента, лучше использовать его значения CSS как есть, даже если они нецелые.