offsetWidth в ff отличается от фактической ширины элементов

Каким-то образом я получаю разные результаты для offsetWidth в Firefox и Chrome. Я получил простую кнопку

<button class="someClass">Dropdown<i class="iconRight iconArrowDown"></i></button>

у которого offsetWidth составляет ровно 89 пикселей. Chrome говорит так и Photoshop тоже. Даже в Firefox он отображается как 89-пиксельный элемент, но Firebugs offsetWidth говорит, что у него есть 90 пикселей. JQuery получает также 90 пикселей в Firefox для outerWidth(), Поскольку я использую ширину для расчета, она должна быть точно правильной.

  • к сожалению, я не могу публиковать изображения пока

Picture1 https://stackru.com/images/1a4ff0bff468c20032eb9875b28c6ed34d6118ac.png

Picture2
https://stackru.com/images/0fbf48f8f3b60901930c2705610e4e7a26361d9f.png

Почему offsetWidth свойство неправильно в Firefox?

РЕДАКТИРОВАТЬ из комментариев:

Я использую нестандартный шрифт. Отключение шрифта решает проблему. Однако, проверяя это с помощью специального шрифта в FF+Linux, FF+Win7 и Chrome+Win7 - Firefox в Windows 7 является единственным браузером, в котором отображаемая ширина отличается от вычисленной offsetWidth. Несмотря на то, что - из-за рендеринга шрифтов - кнопка имеет 91 пиксель в Linux, в вычислениях нет проблем, так как отображаемая ширина одинакова. А пока, наверное, мне просто придется с этим смириться.

1 ответ

Решение

Скорее всего, реальная ширина представляет собой нецелое число пикселей от 89 до 90. При вычислении offsetWidth реальная ширина округляется до ближайшего целого числа. При рисовании то, что вы увидите, будет зависеть от используемых алгоритмов сглаживания и еще много чего.

Если вы просто хотите, чтобы фактическое с объектом - это использование getBoundingClientRect(). Width, которое не делает глупых "округлений до целых".

Другие вопросы по тегам