Соблюдаются ли десятичные разряды в ширине CSS?

даже когда число округляется при рисовании страницы, полное значение сохраняется в памяти и используется для последующего дочернего вычисления. Например, если ваш ящик 100.4999 px рисует до 100px, это дочерний с шириной 50% будет рассчитываться как .5 * 100.4999 вместо .5*100. И так далее до более глубоких уровней.

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

крайний случай, конечно, но что-то, чтобы держать в уме.

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

это лучше всего видно, когда элементы укладываются рядом (или поверх) друг друга; другими словами, если бы я разместил 400 0,5 пиксельных дивов бок о бок, они имели бы ту же ширину, что и один 200-пиксельный div. Если они все на самом деле округленный до 1px (как следует из отдельных элементов), мы ожидаем, что 200px div будет вдвое короче.

Это можно увидеть в этом выполняемом фрагменте кода:

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

ширина будет округлена до целого числа пиксели.

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

edit: Я тестировал демо @Skilldrick в некоторых браузерах ради любопытства. При использовании дробного пикселей значения (не проценты, они работают, как предложено в статье, которую я связал) IE9p7 и FF4b7, похоже, округляются до ближайшего пикселя, в то время как Opera 11b, Chrome 9.0.587.0 и Safari 5.0.3 усекают десятичные разряды. Не то чтобы я надеялся, что у них есть что-то общее...

Они, кажется, округляют значения до ближайшего целого числа; но я вижу несоответствие в chrome,safari и firefox.

например, если 33,3% преобразуется в 420,945 px

chrome и firexfox показывают его как 421px. в то время как safari показывает его как 420px.

похоже, что chrome и firefox следуют за полом и логикой ceil, а safari-нет. На этой странице, похоже, обсуждается то же самое проблема

http://ejohn.org/blog/sub-pixel-problems-in-css/

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

важно отметить, что пиксели в данном случае означает CSS-Пикс, а не пиксели экрана, поэтому контейнер 200px с дочерним элементом 50.7499% будет округлен до 101px CSS-Пикс, которые затем отображаются на 202px на экране retina, и не 400 * .507499 ~= 203px.

плотность экрана игнорируется в этом вычислении,и нет никакого способа определить размер элемента до определенных размеров субпикселя сетчатки. У вас не может быть фонов или границ элементов, отображаемых менее чем на 1 CSS-пикселями размер, хотя фактический размер элемента может быть меньше 1 пикселя css, как показал Сэнди Гиффорд.

интересно, что между ответом натекоечли и Алексея Пономаренко, что точные значения хранятся в памяти и учитываются для некоторых вещей, но не для всех.