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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

Кажется, они округляют значения до ближайшего целого числа; но я вижу несогласованность в хроме, сафари и firefox.

Например, если 33.3% конвертируется в 420.945px

хром и firexfox показывают это как 421px. в то время как сафари показывает его как 420 пикселей.

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

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

Ответ 6

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

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

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

Ответ 7

Интересно, что между ответами natekoechley и Olex Ponomarenko's, что точные значения хранятся в памяти и учитываются для некоторых вещей, но не для всех.