Округление процентов для ширины элемента в CSS

Pavel_K спросил: 28 марта 2018 в 02:42 в: html

Предположим, что у меня есть три div s с шириной 33.3% в контейнере:

div.container {
  width: 100%;
  height: 100px;
}

div.inner {
  width: 33.3%;
  height: 100px;
  float: left;
}

<div class="container">
  <div class="inner" style="background-color:red;"></div>
  <div class="inner" style="background-color:yellow;"></div>
  <div class="inner" style="background-color:black;"></div>
</div>

Могу ли я заявить, что в современных браузерах (Firefox, Chrome, Opera) с любым пользовательским увеличением общая ширина трех внутренних div s будет < = ширина контейнера? Другими словами, может ли быть ситуация, когда из-за округления их общая ширина превышает ширину контейнера?

3 ответа

Emil Borconi ответил: 28 марта 2018 в 02:56

Математически вы правы, если это когда-либо видно невооруженным глазом, я сильно сомневаюсь в этом, и я скажу, что в большинстве случаев разница округления будет потеряна. Тем не менее, если вы хотите быть уверены, что браузер действительно заботится и действительно заполняет весь блок, вы можете использовать вместо него flexbox:

div.container {
  width: 100%;
  height: 100px;
  display:flex;
}div.inner {
 flex-grow:1;
  height: 100px;
  float:left;
}<div class="container">
    <div class="inner" style="background-color:red;"></div>
    <div class="inner" style="background-color:yellow;"></div>
    <div class="inner" style="background-color:black;"></div>
</div>

Я лично предпочитаю flexbox, а не div с плавающей точкой в процентах, это делает добавление / удаление div'ов намного проще, но это личное предпочтение.

Racil Hilan ответил: 28 марта 2018 в 03:14

Большинство браузеров округляют дробные пиксели вниз, но не все. И здесь, под браузером я имею в виду каждую версию каждого браузера, так как разные версии любого браузера могут по-разному обрабатывать дробные пиксели. Таким образом, теоретически, ваши три поля 33.3% могут переполнять их родительский контейнер в какой-то версии какого-либо браузера.

Подумайте об этом, браузер должен соответствовать ограничениям, которые не могут быть выполнены при всех в то же время. Ваш пример трех 33,3% будет математически равен 99,9%, поэтому давайте изменим его на четыре 25%, чтобы они были ровно 100% просто для примера:

  1. 4 поля ширины 25% должны занимать такое же количество пикселей.

  2. 4 поля должны заканчиваться точно на краю контейнера. Не должно быть лишних пикселей (и из-за этого их нельзя переносить).

  3. 4 поля должны всегда касаться друг друга визуально. Не должно быть пропусков или совпадений.

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

Вот хорошая статья / эксперимент: Округление и дробное отображение в браузере Пиксели.

Spudley ответил: 28 марта 2018 в 03:21

Одна вещь, которую вы могли бы сделать, чтобы помочь с этим, это использовать два десятичных знака - то есть 33.33% вместо 33.3%. Это уменьшит предел погрешности для любых проблем округления.

Как только вы достигнете такого уровня точности, вряд ли будет проблемой округление, но если у вас все еще есть проблема с этим, или вы просто хочу быть точным, вы всегда можете сделать что-то вроде этого:

div.inner {
  width: 33.33%;
  height: 100px;
  float:left;
}
div.inner:last-child {
  width: 33.34%;
}

... переопределить последний элемент, чтобы он составлял до 100%.

В целом, лучше всего, вероятно, прекратить использовать поплавки; если вам не нужно поддерживать древние версии IE, теперь есть гораздо лучшие варианты для создания такого макета.

Racil Hilan ответил: 28 марта 2018 в 03:54
Если вы действительно думаете, что 33,33% будут обрабатываться иначе, чем 33,3% или даже 33%, то вы, вероятно, думаете математически, а не как браузеры на самом деле рассчитывают это. Как 33,33% из 100 пикселей уменьшат предел погрешности по сравнению с использованием 33,3%? В обоих случаях вы получите дробный пиксель, и кого волнует, что такое дробное значение? Важно то, что браузер будет с ним делать потом, округляя его вверх, вниз или до ближайшего целого числа. Смотрите мой ответ и ссылку внизу.
Spudley ответил: 28 марта 2018 в 05:09
@RacilHilan - Браузеры работают на субпиксельном уровне, а ширина области просмотра часто составляет сотни пикселей в ширину, поэтому здесь важны доли процента. Смотрите таблицу здесь, чтобы узнать, какую десятичную точность считает каждый браузер (подсказка, даже IE7 смотрит на два десятичных знака).
Racil Hilan ответил: 28 марта 2018 в 06:23
Вот ссылка из моего ответа вернулась ко мне :). Вы говорите о процентной точности? Это математическая концепция, и браузеры, как и любое программное обеспечение, могут использовать любую точность, какую пожелают. У меня не было никаких возражений против этого, и дело не в этом. Дело в том, что после расчета коробки должны отображаться на экране с использованием физики, а не математики: P. Как вы ожидаете, что экран будет отображать 0,33 пикселей? :) Так что не имеет значения, будет ли ширина 33,30 или 33,33, они будут отображаться с использованием 33 пикселей;). Вот почему браузер округляет субпиксель на последнем шаге.
Racil Hilan ответил: 28 марта 2018 в 06:36
Вот небольшой эксперимент, который вы можете легко сделать, чтобы понять, что я имею в виду. Создайте div с помощью width: 100px и поместите в него три элемента div с шириной 33%, 33,3% и 33,33%. Вы увидите, что они имеют одинаковую ширину, вероятно, в любом браузере, который вы используете. Как я уже сказал, ваши 33,33% здесь не имеют значения. В некоторых случаях это может привести к тому, что некоторые браузеры будут округлять вверх, а не вниз, если разница выше .5 против ниже .5, но это только разница, а не большая точность;).
Spudley ответил: 28 марта 2018 в 06:48
Ну, если вы ограничиваете ширину до 100 пикселей, то вы правы; вам не нужно много точности в ваших процентах. Но большинство экранов намного шире. ОП также попросил поддержать любой уровень масштабирования, что снова увеличивает потребность в точности. Наконец, да, вы можете визуализировать треть пикселя. Вот что такое субпиксельный рендеринг. Это в основном относится к шрифтам, и волшебным образом не заставляет ваш экран получать дополнительные пиксели, но это вещь, и браузеры вычисляют ширину и положение с большей точностью, чем отдельные пиксели.