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

Question

Что-то, что меня интересовало, пока я занимался дизайном CSS.

Соблюдаются ли десятичные разряды в ширине css? Или они округлые?

.percentage
{
    width: 49.5%;
}

или

.pixel
{
    width: 122.5px;
}

Answer 1

Если это ширина в процентах, тогда да, она соблюдается . Как указал Мартин, все становится хуже, когда вы получаете дробные пиксели, но если ваши процентные значения дают целочисленное значение пикселя (например, 50,5% от 200 пикселей в примере), вы получите разумное, ожидаемое поведение.

Редактировать: Я обновил пример, чтобы показать, что происходит с дробными пикселями (в Chrome значения обрезаются, поэтому 50, 50,5 и 50,6 все имеют одинаковую ширину) .

Answer 2

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

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

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

Answer 3

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

Это лучше всего видно, когда элементы сложены рядом (или поверх) друг с другом; другими словами, если бы я поместил 400 делителей по 0,5 пикселя рядом, они бы имели такую ​​же ширину, что и отдельный делитель 200 пикселей. Если бы они все на самом деле округлились до 1 пикселя (как следует из рассмотрения отдельных элементов), мы ожидаем, что 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>

Answer 4

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

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

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

Answer 5

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

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

Chrome и Firexfox показывают его как 421px.в то время как сафари показывает его как 420px.

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

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

Answer 6

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

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

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

[*] Вы можете использовать некоторые методы, такие как box-shadow со смещением 0,5 и т. Д., Но фактические свойства box-модели будут отображаться до полного пикселя CSS.