Подтвердить что ты не робот

Как браузеры имеют дело с нецелыми значениями по высоте и ширине?

Когда браузеру присваиваются значения ширины и высоты для элементов, которые не являются целыми значениями, как они справляются с ними?

В частности,

  • На какой стадии округляются нецелые значения? Они округляются до ближайшего целого числа или обрезают их?
  • Когда дети-контейнеры имеют нецелые размеры, будут ли когда-нибудь экземпляры, в которых сумма дочерних длин или высот не равна внутренней ширине/высоте родительского элемента?
  • Предоставляются ли нецелые размеры по-разному для нецелочисленных результатов процентных измерений?
  • Как насчет не целого значения для заполнения и полей?
  • Изменить: Это браузеры, которые выполняют это округление, или это ОС? Если это ОС, создает ли условия, в которых элементы "думают" браузера больше, чем их окрашенная область, и это создает проблемы с размером родительских контейнеров?
4b9b3361

Ответ 1

Утверждение

Браузеры предназначены для обработки чисел с плавающей запятой и значений менее одного пикселя.


Чтобы увидеть простой пример показывающий, что браузеры используют числа с плавающей запятой в своих вычислениях, создайте элемент ширины 3% и посмотрите на его рассчитанные свойства в инструментах разработчика Chrome при изменении размера.

Вы должны увидеть что-то вроде этого:

enter image description here

"35.296875" не может быть точно отображен дисплеем, который отображает один пиксель на один пиксель на физическом дисплее (CRT, традиционный ЖК-дисплей). Однако более новые дисплеи с высокой плотностью используют другое соотношение, чем 1-1, и это дробное значение может быть концептуально использовано для обеспечения большей точности.

Даже на дисплеях с низкой плотностью дробное значение может дать подсказку для подпиксельного рендеринга, в котором используются красные, зеленые и синие компоненты пиксель, чтобы края объекта выглядели более плавными, чем возможно, с целыми значениями пикселей.

Но точно, что браузер будет делать с такими цифрами, не очень предсказуем. Вы не можете (в настоящее время) попросить обозревателя сделать ящик шириной 31.5px и ожидать последовательного или даже значимого результат. Некоторые браузеры будут обрезать дробные значения; другие округляют вверх/вниз.

Подпиксельная рендеринг обычно используется для текста и хорошо работает в большинстве/во всех браузерах, но каждый браузер реализует это по-другому, и очень мало может сделать разработчик, чтобы повлиять на то, как это работает.

Когда

На какой стадии нецелые значения округляются в наследовании цепь?

Большинство/все вычисления выполняются как числа с плавающей запятой, и любое округление может происходить в конце процесса или даже вне контроля браузера. Например, браузер может делегировать свое сглаживание компоненту ОС (например, IE9 делает для Windows Direct2D и DirectWrite).

Переходы CSS могут быть тесно интегрированы с ОС и/или аппаратным ускорением. Это еще один случай, когда, я думаю, очень вероятно, что значения с плавающей запятой сохраняются браузером и передаются нижележащему слою.

Поведение/ошибки округления

Когда дети-контейнеры имеют нецелые размеры, когда-либо бывают случаи, когда сумма детских длин или высот равна внутренней ширине/высоте родительского элемента?

Я видел это в старых браузерах (IE7) в результате процентных вычислений, где 50% + 50% > 100%. Обычно это не проблема, пока вы не попытаетесь сделать что-то более сложное. Анекдотически, я видел ошибки "с одного пикселя" при попытке точно выровнять элементы HTML как часть анимации.

Процент против других единиц

Предоставляемые нецелые размеры обрабатываются по-разному нецелые результаты процентных измерений?

Они округляются до ближайшего целого числа или обрезают их?

Это меняется. Этот более старый ответ утверждает, что они усечены, но (в Chrome 24) я вижу округление (обратите внимание на пример скрипта). Обратите внимание на мой предыдущий комментарий о различиях между Chrome и Safari на том же компьютере.

Как насчет не целого значения для заполнения и полей?

Как правило, применяются те же правила (или их отсутствие).

Стандарты

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

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

Опять же, это из раздела, посвященного конкретно canvas, но он вкратце:

  • Браузеры абсолютно взаимодействуют с дробными пикселями.
  • Фактические реализации будут различаться.
  • Существует некоторая стандартизация.
  • Отображение отображения устройства может повлиять на расчет.